[Resolved] Main Navigation Menu / Sub Menu Border / Padding?

[Shane]

Is there a way to add a simple 1 or 2 px border to the currently selected and the hovered over main navigation / sub navigation items? I’d also like to be able to change the dropdown sub menu’s to be perfectly centered with their parent menu item.. Is this possible? Lastly can I change the width of this dropdown menu and make the text align centered as well? I inspected elements, some trial and error but had no luck..

Thanks Gang!

[Tom]

Border around current/hovered menu items:

/* regular - transparent border to prevent jumping */
.main-navigation .main-nav ul li a {
    border: 1px solid transparent;
}

/* current */
.main-navigation .main-nav ul .current-menu-item > a, 
.main-navigation .main-nav ul .current-menu-parent > a, 
.main-navigation .main-nav ul .current-menu-ancestor > a {
    border: 1px solid #000;
}

/* hover */
.main-navigation .main-nav ul li > a:hover, 
.main-navigation .main-nav ul li.sfHover > a {
    border: 1px solid #000;
}

Centering the sub-menu with the parent item is pretty difficult – not even entirely sure it’s possible without javacript. However, you can center and adjust the width.

.main-navigation ul ul {
    width: 200px;
    text-align: center;
}

Hope this is helpful 🙂

[Shane]

Very helpful! Thanks for all of your extra attention. Slowly but surely it’s all coming together.. Also, pertaining to primary navigation menu editing, is there a way to remove the dropdown arrow icon to the right of the parent navigation buttons and reclaim it’s space to help better center the text? Can I change the touch area which triggers the dropdown action in mobile view? The little arrow on the far right is a bit small, would rather be able to tap anywhere except upon the menu text and have the dropdown menu trigger. Also I seem to be having trouble controlling when the responsive / mobile resolution is activated.. I’d notice the navigation menu folds under itself, creating a second row within a certain threshold before swapping to the singular dropdown menu mobile version..

blog.southernstatesimaging.com

My aim is to be able to keep the navigation bar in this 2-row navigation state on a landscape oriented iphone. Possible?

[Marianne]

Hi,
I am using the Freelancer theme but once I did the update today, my navigation menu has disappeared on the mobile site. Nothing happens when you touch the menu button. I don’t have any technical skills so any help would be great.
Thanks.

[Tom]

Shane – to remove the arrows, you can try this CSS:

@media ( min-width: 768px ) {
    .sf-menu li a::after {
        display: none;
    }

    .sf-menu > li a {
        padding-right: 1.5em !important;
    }
}

Then to change the touch areas on mobile, try this plugin: https://wordpress.org/plugins/generate-legacy-mobile-menu/

You can choose when the initiate the mobile menu with this CSS: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Marianne – any chance you can start a fresh topic on this issue? What hosting are you using? Can you link me to your site?

[Shane]

Awesome! Thanks again Tom. Getting the hang of it but still difficulty locating specific elements simply by inspecting and comparing to the theme default style.css.. One more thing on navigation though, is it possible to easily make the main navigation buttons two-toned with css? Like a split into 2 colors down the middle horizontally? Top half one color and bottom half another? Furthermore, is it then possible to add a couple more pixels of a third color to the top of this same main navigation bar?

[bdbrown]

Hi Shane. Take a look at this site; it will generate the gradient css for you:
http://www.cssportal.com/css-gradient-generator/

[Tom]

You can alternatively use an image and apply it to the menu items using our Backgrounds add-on 🙂

[Author]

Posts