[Resolved] Header Navigation Button/Border

Home Forums Support [Resolved] Header Navigation Button/Border

Home Forums Support Header Navigation Button/Border

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1530304
    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*/
        }
    }
    #1530406
    Leo
    Staff
    Customer Support

    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*/
        }
    }
    #1530429
    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

    #1530506
    Leo
    Staff
    Customer Support

    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/

    #1530697
    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

    #1531211
    David
    Staff
    Customer Support

    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.

    #1531263
    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.

    #1531373
    Leo
    Staff
    Customer Support

    Try this CSS:

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

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

    Have a nice day

    #1531541
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.