Tabbing in secondary menu items

Hi there,

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

You can use the private information field.

Let me know :)

thanks, see below

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;
}

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.

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;
    }
}

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

Try this CSS:

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

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.

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.

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.

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?

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!

Hi there,

try adding this CSS:

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

thanks David - perfect!