2nd color in header

[Torsten]

Hi,
1) I’m trying to add inside the header on the very right an extra yellow vertical bar with #fece42 – approx. 10px wide and the height of the header.
I’ve been trying to work with the following

.inside-header {
    padding: 0 50px; 
}

adding padding-right 10px #fece42 in different ways and no success.

2) I tried as well to have the header fixed above the UberMenu when scrolling.
If using “navigation as header” and “sticky navigation” with Logo, the header is hidden behind the Ubermenu.
Any code to keep the header in place?

Thanks for helping,
best,
Torsten

[David]

Hi there,

1. This will require different CSS if we fix #2. So lets deal with that first.

2. Can you set the Navigation as Header and remove the sticky nav on the uber menu – i can then provide CSS for both 1 and 2.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

Hi David,
I made the requested changes…
😉

[David]

Try this CSS:

.main-navigation,
.secondary-navigation {
    position: sticky;
    position: -webkit-sticky;
}
.main-navigation {
    border-right: 10px solid #fece42;
    top: 0;
}
.secondary-navigation {
    top: 80px; /* Height of primary navigation */
    z-index: 100;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

Hi David,
excellent for the yellow bar.
For the sticky menu and header I get an error:
>>Expected (static | relative | absolute | fixed) but found ‘sticky’.<<
the header moves partly, please see yourself on the site.

[David]

You can ignore the warning provided its a supported CSS property that WP doesn’t recognise.

I edited the code here to fix the z-index issue

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

lovely…
but still the header height narrows when scrolling down.
I’m awaiting a bigger logo file from the designer to replace it.
Will that solve the problem of narrowing the header when scrollin down?
Take your time, I might not be able to work on this project tomorrow…
best,
Torsten

[David]

Sorry not seeing the ‘narrowing’ is this on any particular browser or device?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

this effect stopped after I changed the logo last night, after posting my comment, into a bigger size.
Did I mention that your support is the best I know?!
THANK YOU!

[Torsten]

this is happening in Chrome when I’m logged in as admin.
fine with me.

[David]

Thanks for the kind words
So is this all resolved ? 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Torsten]

yes, I already marked the topic as resolved…
best,
Torsten

[David]

Awesome – glad to hear that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts