Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Adding an svg logo to the Nav Bar in Antimatter

Started by ben mitchell 9 years ago · 9 replies · 2867 views

9 years ago

I would like to add a logo to the top left corner of the nav bar
I have got as far as changing the base.html.twig file to:
<header id="header"> <div id="logo"> <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ pages.find('/images').media['sboc_svg.svg']}} {{ config.site.title }}</a></h3> </div>
But what I would like to know is how to make that logo responsive When scrolling the page and also fitting to the general size of the navbar? Just like the antimatters default site title does?

Thanks

Andy Miller

Grav Core Team Grav Forum Moderators Grav Creator First Post Conversation Starter Well Liked 335 posts

9 years ago

You probably need to play with this a little in the web-inspector of your browser. Try something like:

YAML

width: 100%;
max-height: 50px;

9 years ago

Thanks for the reply.
I just cant seem to make the logo responsive when scrolling. It moves down but doesn't resize ( I'm extending the antimatter theme)
This what I am after https://appserver.io

Andy Miller

Grav Core Team Grav Forum Moderators Grav Creator First Post Conversation Starter Well Liked 335 posts

9 years ago

you can use media queries to adjust the size based on the browser width.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

9 years ago

Thank you for your time. I have managed now to get the logo to resize but it does not follow the default animation like the rest of the nav bar in the Antimatter theme.
I've been struggling. If anyone could help me out that would be great.
Below is my _header.scss

CSS

    #header {
    @extend .default-animation;
    @extend .padding-horiz;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: $header-height;
    background-color: #f5821f;
    box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15);

    // scroll based changes
    &.scrolled {
        height: $header-height - 2rem;
        background-color: rgba(255,255,255,0.90) !important;
        box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15) !important;

    #logo h3 {
            font-size: 1.6rem !important;
            width: 60%;
            margin-top: 3px;
            font-size: 1.6rem !important;
        }
        #logo a, #navbar span {
            color: $core-text !important;
        }
        #navbar a {
            color: $core-accent !important;
            &:hover {
                color: darken($core-accent, 20%) !important;
            }
        }
        #navbar a:before, #navbar a:after {
            background-color: $core-accent !important;
        }

        .navigation {
            margin-top: 0.5rem !important;
        }
    }

    // set heights for vertical centering
    > .grid, #logo, #navbar {
        height: 100%;
    }

    #logo {
      float: left;
      h3 {
            @extend .default-animation;
        @extend %vertical-align;
        font-size: 2rem;
        line-height: 2rem;
        margin: 0;
            text-transform: uppercase;
            a {
                color: $core-text;
            }
        }
    }

and my base.html.twig

TWIG

        {% block header %}
    <header id="header">
        <div id="logo">
            <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ pages.find('/images').media['sboc-text-logo.svg'].resize(230).html() }}</a></h3>
        </div>

Just thought I'd mention, apart from a couple of css issues (due to my lack of experience.) It has been a joy to learn and build a website with GRAV!

Thanks

9 years ago

What you are working on we can see online ?

9 years ago

https://sboctest.co.uk

9 years ago Solution

Hey ben,

-- remove style on img inline
-- set display: inline-block; to #header #logo h3 > a {}
-- set max-width: 230px; width: 100%; transition: width 500ms ease; to img without class .scrolled
-- set ` .scrolled img { width: 50% }

For the perfect add an ID or class to IMG, like this: <img class="top-logo" src=""> & change .scrolled img { width: 50% } `

with:

.scrolled .top-logo { width: 50% }

9 years ago

All sorted, Thanks so much!

9 years ago

I'm glad you solved it. 👍

I had prepared this in case I needed it
Live xample

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	197	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	92	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	454	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	47	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	127	3 months ago

Suggested topics