[Resolved] Header Navigation Button/Border

[Felix]

Hi Team GP,

I implemented a border around a menu-item according to a CSS that I found in this forum. Moreover, I want it to change its background-color and text-color when hovered over.

It works fine, except on the front page. There is a “Home Page Hero – Merged”-element (Merch-Theme), that sets a header background color, which might be the problem. Any idea, how the issue can be fixed?

Cheers

/* style highlight menu button */
@media (min-width:769px) {
    .main-navigation .main-nav ul li.schatz-menu a {
        /*background-color: #ffffff;*/
        border: 2px solid #f4b429;
        color: #000000;
        line-height: 60px; /*this number will likely need to be adjusted*/
    }
}
@media (min-width:769px) {
    .main-navigation .main-nav ul li.schatz-menu a:hover {
        background-color: #ffd700;
        border: 2px solid #f4b429;
        color: #ffffff;
        line-height: 60px; /*this number will likely need to be adjusted*/
    }
}
/* style highlight floating-menu button */
@media (min-width:769px) {
    /*.main-navigation.sticky-navigation-transition .main-nav > ul > li > a*/
    .main-navigation.sticky-navigation-transition .main-nav ul li.schatz-menu a {
        /*background-color: #ffffff;*/
        border: 2px solid #f4b429;
        color: #000000;
        line-height: 80px; /*this number will likely need to be adjusted*/
    }
}
@media (min-width:769px) {
    .main-navigation.sticky-navigation-transition .main-nav ul li.schatz-menu a:hover {
        background-color: #ffd700;
        border: 2px solid #f4b429;
        color: #ffffff;
        line-height: 80px; /*this number will likely need to be adjusted*/
    }
}

[Leo]

Hi there,

Replace this:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.schatz-menu a {
        /*background-color: #ffffff;*/
        border: 2px solid #f4b429;
        color: #000000;
        line-height: 60px; /*this number will likely need to be adjusted*/
    }
}
@media (min-width:769px) {
    .main-navigation .main-nav ul li.schatz-menu a:hover {
        background-color: #ffd700;
        border: 2px solid #f4b429;
        color: #ffffff;
        line-height: 60px; /*this number will likely need to be adjusted*/
    }
}

With this:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.schatz-menu a {
        /*background-color: #ffffff; !important*/
        border: 2px solid #f4b429 !important;
        color: #000000 !important;
        line-height: 60px; /*this number will likely need to be adjusted*/
    }
    .main-navigation .main-nav ul li.schatz-menu a:hover {
        background-color: #ffd700 !important;
        border: 2px solid #f4b429 !important ;
        color: #ffffff !important;
        line-height: 60px; /*this number will likely need to be adjusted*/
    }
}

[Felix]

Nice, thank you!

Just a quick follow up question on the floating navigation: where/how exactly can I add a padding/margin right and left. I checked in the Customizer, but can’t find anything under “Layout->Header”, where I activated the floating menu.

Cheers

[Leo]

where/how exactly can I add a padding/margin right and left.

Not quite sure if I understand – What exactly are you trying to do here?

The green part here is the header padding if that helps?
https://docs.generatepress.com/article/header-padding/

[Felix]

It might be called “sticky header” (I gotta translate, since I m using WordPress in German).

If you check my website, you can see that there is a padding around the header. However, if you scroll down, you will notice that the sticky header has none. Where can I set the padding for that “sticky” header?

Cheers

[David]

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    #sticky-navigation .inside-navigation {
        padding: 20px 64px 20px 64px;
    }
}

Then change the Customizer > Layout > Sticky Navigation –> Menu Item Height to match the menu item height in Customizer > Layout > Primary Navigation.

[Felix]

It is almost perfect now, except the 10px padding, which is wrapping the logo in the sticky-navigation, hence, makes it smaller. I would like to get rid of that padding: Can you help me out?

I cannot find anything under Customizer > Layout > Sticky Navigation, where I’ve chosen the sticky-nav logo.

[Leo]

Try this CSS:

.navigation-stick .navigation-branding img {
    padding: 0;
}

[Felix]

Great, all fine now. Thank you guys very much!

Have a nice day

[Leo]

No problem 🙂

[Author]

Posts