change background on bullet points in sub menu, using mobile view

  • Unknown's avatar
    classicitsupport · Member ·

    Hi,
    I am trying to have a darker background in my ‘Services’ sub menu. I have managed it for the li a part but when in mobile view bullet points appear and their background colour is still the lighter colour of the main menu. They are right up against the list text and looks a bit ugly. I was thinking of adding padding to the list text or changing the background of the bullet points to the darker colour to blend in. I haven’t managed either yet.
    Thanks for any help with this.

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @classicitsupport!

    Changing the color on the mobile menu is going to be tricky, because there are multiple layers of padding and margins to contend with.

    Would it work to change the background color on desktops, but let the mobile stay the same color? The bullet points should work to differentiate them as a submenu.

    If so, try this CSS:

    @media screen and (min-width: 1080px) {
.main-navigation ul ul,
.main-navigation ul ul li,
.main-navigation ul ul li:hover {
	background-color: #a9b7b8;
}
}

.main-navigation ul ul li {
	color: #fff;
}

    You’ll want to replace your three menu-item-15 styles with the above – that way it will work for any submenu and not just one specific one :)

    Give that a try and let me know what you think!

  • Unknown's avatar
    classicitsupport · Member ·

    Thank you , yes that was a much better plan. Looks nicer as mobile without the colour change.

  • staff-loquaciousloon · Staff ·

    You’re welcome! :)

  • The topic ‘change background on bullet points in sub menu, using mobile view’ is closed to new replies.