[Resolved] Tabbing in secondary menu items

Home Forums Support [Resolved] Tabbing in secondary menu items

Home Forums Support Tabbing in secondary menu items

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1558675
    Nick

    Hi – I would like to tab in by 5 pixels the secondary menu options as shown here: https://ibb.co/zHx2tfP

    Could you please advise best way to achieve this?

    thanks

    #1559174
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1559318
    Nick

    thanks, see below

    #1559734
    Elvin
    Staff
    Customer Support

    Hi,

    Thank you for providing the link.

    Hi – I would like to tab in by 5 pixels the secondary menu options as shown here: https://ibb.co/zHx2tfP

    Could you please advise best way to achieve this?

    I’m not exactly sure what you mean by “tab”. Did you mean indentation on the sub menu items?

    If so, you can add this CSS:

    .main-navigation.toggled .main-nav ul ul.toggled-on li {
        margin-left: 5px;
    }

    If you also want to copy the “rounded edges” effect similar to the image, you can add this:

    .main-navigation.toggled .main-nav ul ul.toggled-on {
        border-radius: 5px;
    }
    #1559921
    Nick

    Thanks – that does the job perfect.

    Could you also let me know how to change the background colour and font colour of this sub menu, just in mobile widths? The colour setting in customiser is for desktop/mobile combined.

    #1560341
    David
    Staff
    Customer Support

    Hi there,

    add this CSS to change the submenu colors:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul ul,
        .main-navigation .main-nav ul ul li a,
        .main-navigation .main-nav ul ul li:hover a {
            background-color: #f00;
            color: #fff;
        }
    }
    #1561311
    Nick

    Thanks David – that works, however one issue….at the bottom of the submenu on mobile widths there is a horizontal line, can this be removed? See link below

    #1561729
    Leo
    Staff
    Customer Support

    Try this CSS:

    @media (max-width: 768px) {
        .main-navigation ul ul {
            box-shadow: none;
        }
    }
    #1561879
    Nick

    Thanks Leo – that worked fine thanks. There seems to be a last issue as follows – See the following link in mobile screen width and expand the main “About” menu. You will see “About Us” is in grey….it should be in the background blue colour. Have tried an :active css selector but doesn’t seem to work. Any thoughts would be appreciated.

    #1562345
    Elvin
    Staff
    Customer Support

    You will see “About Us” is in grey….it should be in the background blue colour. Have tried an :active css selector but doesn’t seem to work. Any thoughts would be appreciated.

    I believe you can set this up on Dashboard > Appearance > Colors > Primary Navigation and set the Sub menu item’s “Background Current” color to your preference.

    #1562370
    Nick

    Thanks Elvin – however I am trying to fix the issue in mobile screen widths only (desktop screen widths appear just fine). To restate the issue…

    In mobile screen widths, click the link below and expand the main “About” menu. You will see “About Us” is in grey….it should be in the background blue colour.

    #1562949
    Elvin
    Staff
    Customer Support

    Thanks Elvin – however I am trying to fix the issue in mobile screen widths only (desktop screen widths appear just fine). To restate the issue…

    In mobile screen widths, click the link below and expand the main “About” menu. You will see “About Us” is in grey….it should be in the background blue colour.

    To clarify: You’re trying to expand the sub menu items within the header area only?

    #1563114
    Nick

    No, I need the colour of the active background changing.

    To reiterate:

    1) Visit the link below
    2) Reduce screen width to mobile width
    3) Click hamburger icon
    4) Click “About”
    5) The grey menu bar highlighting on the word “About us” needs changing to blue and only in mobile screen widths

    I have also provided a screenshot of the problem.

    Hope this is clear.

    Thanks!

    #1563308
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media(max-width: 768px) {
        .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
            background-color: #2ea3f2;
        }
    }
    #1563318
    Nick

    thanks David – perfect!

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