Split theme navigation height


I’m trying to find out if there is a way to adjust the height of the Navigation bars (specifically the top one). I can’t seem to find anything looking at any of the CSS’s. I thought maybe the height settings under the Nav sections of the styles.css would be it, but changing them has not effect. I’m not exactly an HTML expert, so…

Any direction would be appreciated.



It’s that, what you want? Put in CSS, change values.

.header { height: 100px; }

Well that go me somewhere thank you. That adjusted what apparently is the foreground of the Nav bar… seems there is a background as well and the Link Text alignment that needs to be adjusted.

Apart from not really knowing the Tags (which are easy enough to find online), I guess I don’t understand which CSS controls what exactly and/or how they integrate with each other. Sorry for the ‘noob’ questions, but I learn fairly quickly. :slightly_smiling:


No solution, sorry.
The black underground remains.
Maybe ask Yuzoolthemes directly.

Ok, well thank you for your responses. I’ve sent a link to this thread to Yuzoo… Hopefully they’ll come here and enlighten us.

Try this @cmsk

@media only screen and (min-width: 768px) {
.header {
height: 170px;

Try and change the bold

That will effect anything wider that 768px

For everything else:

.header {
height: 50px;

And thanks @Oscar for helping out :slight_smile:

1 Like

@media only screen?”

Not sure where I put this code. If I put it in CSS the top Navigation bar just gets higher/thicker. I want it thinner (the 30-50px) works, but that code doesn’t fix the height of the grey background. Oscars image above illustrates the problem perfectly.

Okay, I see this code in the styles.css; however, it still only adjusts the height of the foreground bar… it’s the background bar that’s the issue.


Works not for me, the black strip remains.
But with this code, it disappears. But from a width of 1168px, it appears below. Grrrr!

@media only screen and (min-width: 768px) { .header { height: 50px; } }

@media only screen and (min-width: 768px) {
#intro { margin-top: -20px; } }


With this additional code, it seems to work ! :wink:

#intro #intro-background { height: 110%; }

WOW Oscar that’s PERFECT!! Exactly what I was looking for and fully safe to say I NEVER would have figured that out.

Thank you good Sir!

1 Like

… It’s my pleasure :wink:

1 Like

Great work guys!!

1 Like

I had to address browser window resizing on the secondary nav bar. I was able to take care of the fixed width with this:

.secondary-nav {
pointer-events: auto;
white-space: wrap;

However, I can’t seem to replicate the same with the top/main nav bar. I’ve tried the WRAP in several locations, but to no avail. Any thoughts?

1 Like

Need to revisit this question. See the below images. In RW preview the top menu bar condenses to a dropdown when the screen browser window is shrunk and/or in phone view.

This doesn’t work or I should say the dropdown ‘bars’ don’t show up with published pages in web browsers nor on phones.

Need an assist on this.

The secondary nav bar auto-wraps with the code I mentioned in the previous post.

So I either need the first nav bar to wrap as well, or I need to get the drop down bars to show. I’m fine with either…


I think you must add a htaccess file on the root of your server with this content, because that’s a svg file for the icon. I had the same problem.

AddType image/svg+xml svg svgz AddEncoding gzip svgz

For this, I have no solution, unfortunately.

Thank you again, I’ll look into it!