[Resolved] Border around a single menu button

Home Forums Support [Resolved] Border around a single menu button

Home Forums Support Border around a single menu button

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #306589
    Mustafa

    Hi,

    I’d like to know how to create a thin white border around a single primary navigation button to make it stand out from the others.

    Would someone be able to advise on how I can do that please?

    #306622
    Leo
    Staff
    Customer Support

    Hi there,

    Add the class menu-border to the Custom Classes field of the menu item(s) that you want to apply border:
    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then add this CSS:

    .menu-border {
        border: 2px solid #ffffff;
    }

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

    Can you provide a link to your site if this doesn’t work?

    #306752
    Mustafa

    Thanks for the code Leo.

    It worked great using the Simple CSS plugin.

    Just one thing I noticed after adding this code is that the background area that is highlighted when hovering over the other menu options now appears 2 pixels shorter at the bottom in comparision to the menu item that I’ve added the border around.

    Have a look here: http://prnt.sc/exe0jj

    Is there a way to make the highlighted hover area of the other menu items 2 pixels longer at the bottom to match the highlighted area of the button with the border around?

    I also noticed that if I put the menu in the footer area the white border around one of the menu items it appears around the item quite wide.

    http://prnt.sc/exerkb

    How can I change of the menu item border just in the footer area?

    #306865
    Tom
    Lead Developer
    Lead Developer

    Try this CSS instead:

    .main-navigation li a {
        border: 2px solid transparent;
    }
    
    .main-navigation li.menu-border a {
        border: 2px solid #ffffff;
    }
    #306923
    Mustafa

    Hi Tom,

    Thanks for your reply.

    The code you gave just makes the border around the single menu item slightly thicker but the highlighted area around the other menu items when I hover my mouse over them stay the same.

    #307076
    Tom
    Lead Developer
    Lead Developer

    Can you link me to the site possibly?

    #307124
    Mustafa

    Yes sure, here it is.

    I am trying to get the border around the menu item at the top but it is showing up really wide in the footer widget and doesn’t turn white when I hover over it in the footer.

    #307349
    Leo
    Staff
    Customer Support

    Could try something like this:

    .inside-footer-widgets .menu-border.menu-item-733 {
        max-width: 27%;
    }
    #307351
    Tom
    Lead Developer
    Lead Developer

    Did you remove the original CSS before adding my CSS?

    #307850
    Mustafa

    Hi Tom,

    Yes I did remove the other code before trying yours. I’m using your code now for you to see what it looks like.

    Leo thanks. The border in the footer area is now narrower. Is there a way to add some space in between the menu text and the border around it in the footer area like it is in the primary menu area?

    #308016
    Tom
    Lead Developer
    Lead Developer

    You still have this CSS which is throwing off the size:

    .menu-border {
        border: 2px solid #ffffff;
    }

    Removing that should help a lot.

    #308210
    Mustafa

    Hi Tom,

    Thanks for pointing that out. It’s looking great now!

    I entered your code into your Simple CSS plugin but I forgot I still had that code in the WP Customizer CSS section which I’ve now removed.

    #308219
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! 🙂

    #368713
    Roy

    Hi,
    may this feature could be build in in the customizer in the next updates? I think it’s a nice idea…

    #368761
    Leo
    Staff
    Customer Support

    Hi Roy,

    Border add-on is on the the road map.

    For now this article should also help: https://docs.generatepress.com/article/adding-buttons-navigation/

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.