Adding an svg logo to the Nav Bar in Antimatter

Support Themes & Styling
1

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

2

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

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

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

4

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

5

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

    #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

        {% 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

6

What you are working on we can see online ?

7

https://sboctest.co.uk

8

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% }

1 Like
9

All sorted, Thanks so much!

1 Like
10

I’m glad you solved it. :+1:

I had prepared this in case I needed it
Live xample

2 Likes