How can I customize a navbar with Vantage ?

anyone ?

On lines 107 and 122 of your child theme’s stylesheet, you’ve got <style> tags, which you can’t use in a CSS file. It should work fine if you delete those tags. Also, in many places in your child theme’s stylesheet (lines 47, 83, 106), you’ve got the wrong comment delimiters: you can’t use // in a CSS file, you should use /* ... */ instead.

Hi

Yes thanks I’ve just added them then deleted them ! I was doing PHP before :/ I’m tired …

I removed the <style> tags toot And thanks a lot, my font displays properly on chrome and IE now !

The only remaining problem is the following one : when I reduce the page size, let’s say below 1100 px, the text, the slider and the menu begin to go left If I reduce again the width, the size of the slider and the text is reduced, but my menu begins to go across the logo.

And finally, when width reach 680px, the logo is stacked above the menu and everything is ok !

Have you got any idea for this 680px value ? I’ve tried to use CSS @media queries, but without success.

Thanks a lot

The 680px is coming from your parent theme’s stylesheet. You can override it in your child theme’s stylesheet with your own media queries, though.

As for your menu issue, I can reproduce it on my local WP install, too. What’s happening is that the header sidebar area is positioned absolute, which takes it out of the document flow, so the menu can end up “floating” over the logo if the screen size is small enough and/or the menu is wide enough.

One option might be to set a separate media query for the header sidebar:

@media screen and (max-width: 1000px) {
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 50px;
    max-width: 100%;
  }
}

You could also try centering the logo in that media query as well.

Hi,
thanks a lot, it works great now ! We’re almost done ?? ?? ??

My logo seems to be resized (a little bit bigger than the original image), it displays blured : the edges are not sharp. How could it be solved ?

After reducing then increasing the width of my window, the slider is cut in its lower part. Does it come from our CSS ?

I’ve seen that the logo class was “logo”, how can it be centered in the media query ?
I’ve tried :

body.responsive header#masthead hgroup .logo img {
     margin-left: auto;
     margin-right: auto;
	}
}

(and also without “img”) but I can’t manage to select it

Again, thanks a lot for your time and your help

It’s ok for the logo-blur problem, I solved it ??

Only the two last problems remain.

This is what I see when I visit your site (12:47pm, Mountain time, Safari 8.0.3, Mac OS Yosemite): https://imgur.com/vSAQgHO To my eye, the logo looks centered and I don’t see the slider being cut off at the bottom. What browser and OS are you using?

For the slider, I think it depends on the browser used and the OS. With Chrome 40.0.2214.115 m, when resizing the scree several times, my Vista laptop shows a cut off slider, whereas my Win 8 laptop does not. Just forget about it, it is not really important.

About the menu :

– with FF 35.0.1, Chrome 40.0.2214.115 m and IE 11, the menu does not come across the logo and goes below properly, as soon the max width is reached. Actually, I’ve set my media query max-width to 1200. Between 1200 and 680, the logo is left-aligned. Then, below 680, the logo is centered, as it is displayed on your picture. I have this result with those 3 browsers. If you make your window’s width be between 1200 and 680 ans you’ll see what I mean. How should I center the logo for those “intermediate” values ? And, when the menu is stacked, how can I center it too ? Thanks

I still have a bug with IE 9 on a Vista x86 laptop , the logo remains covered by the menu when I decrease the width, as if there was’t any media query.

Here is what I mean by “the logo is aligned left for intermediate values between 1200 and 680”:

https://imgur.com/hMxqqy3

Regards

It took a surprising amount of CSS, but this should do it.

@media screen and (max-width: 1200px) {
	body.responsive header#masthead .hgroup .logo {
		float: none;
	}

	body.responsive header#masthead .hgroup .logo img {
		margin: 0 auto;
		display: block;
	}

	header#masthead .hgroup #header-sidebar {
		border: 1px solid black;
		position: relative;
		text-align: center;
		width: 100%;
	}

	header#masthead .hgroup #header-sidebar:after {
		content: '';
		display: table;
		clear: both;
	}

	header#masthead .hgroup #header-sidebar aside.widget {
		border: 1px solid pink;
		margin: 0 auto;
		display: inline-block;
		float: none;
	}

	body.responsive header#masthead .hgroup #header-sidebar .widget {
		display: inline-block;
	}

	header#masthead .hgroup #header-sidebar aside.widget:after {
		content: '';
		display: table;
		clear: both;
	}

	.menu li {
		float: none;
	}
}

Hi,
thanks again for your help, I would never have reached my goal without you.

I’ve found a solution for the big white gap around the menu, I’ve changed a bit the code you gave me, it seems to work :

@media screen and (max-width: 1200px) {
	body.responsive header#masthead .hgroup .logo {
		float: none;
	}

	body.responsive header#masthead .hgroup .logo img {
		margin: 0 auto;
		display: block;
	}

	header#masthead .hgroup #header-sidebar {
		/*border: 1px solid black;*/
		position: relative;
		text-align: center;
		width: 100%;
	}

	header#masthead .hgroup #header-sidebar:after {
		content: '';
		display: table;
		clear: both;
	}

	body.responsive header#masthead .hgroup #header-sidebar .widget {
		display: inline-block;
	}

	header#masthead .hgroup #header-sidebar aside.widget:after {
		content: '';
		display: table;
		clear: both;
	}

	.menu li {
		float: none;
	}
}

Can someone help me remove the black horizontal line at the top of my header at ksamuels.com and change the black line under the menu to a slim red horizontal line. Please? How can I do this with this Vantage Premium theme?