Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Main Navigation Menu / Sub Menu Border / Padding?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #141799
    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!

    #141808
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #141929
    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?

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

    #141950
    Tom
    Lead Developer
    Lead Developer

    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?

    #142657
    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?

    #142668
    bdbrown

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

    #142677
    Tom
    Lead Developer
    Lead Developer

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

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