Support » Theme: Sydney » Colors of mobile menu not changing

Colors of mobile menu not changing

  • Resolved deirdrebeth

    (@deirdrebeth)


    4 years, 10 months ago

    I’m using Sydney on a not-yet released client site
    When I go into Customize > colors: I can get the sub menus to be colored perfectly
    But when I view the page as mobile the menus are black and sub-menus dark blue – all with white text

    I don’t see anywhere to change that to match the colors entered in the Customize section

    The menu is my main WP menu

    https://photos.app.goo.gl/1J8zm3Uq1Q29FLVK2 is a screenshot of the mobile view vs the desktop view

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Kharis Sulistiyono

    (@kharisblank)

    4 years, 10 months ago

    Hello there,

    Mobile menu design is styled specifically in the main theme’s CSS. To change it, you can use this CSS code: 

    
#mainnav-mobi ul li {
  background-color: #fff000;
}

#mainnav-mobi ul ul.sub-menu li {
  background-color: #ff0000;
}

    To apply it to your site, add it to Appearance > Customize > Additional CSS from dashboard.

    Regards,
    Kharis

    Thread Starter deirdrebeth

    (@deirdrebeth)

    4 years, 10 months ago

    Thank you Kharis!

    Any chance changing the text colour is just as easy? I tried “color” and “text-decoration-color” but neither worked…that could be my bad coding though.

    Regards

    Kharis Sulistiyono

    (@kharisblank)

    4 years, 10 months ago

    Hello there,

    Try this code: 

    
#mainnav-mobi ul li {
  background-color: #fff000;
  color: #000;
}

#mainnav-mobi ul ul.sub-menu li {
  background-color: #ff0000;
  color: #ddd;
}

    Regards,
    Kharis

    Thread Starter deirdrebeth

    (@deirdrebeth)

    4 years, 10 months ago

    Sadly that didn’t seem to work for the text, but I’m happy with the background matching.

    Thanks!

    Kharis Sulistiyono

    (@kharisblank)

    4 years, 10 months ago

    Hello there,

    Try adding !important argument to set highest priority and against internal CSS produced by customizer. 

    
#mainnav-mobi ul li {
  background-color: #fff000;
  color: #000 !important;
}

#mainnav-mobi ul ul.sub-menu li {
  background-color: #ff0000;
  color: #ddd !important;
}

    Regards,
    Kharis

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Colors of mobile menu not changing’ is closed to new replies.

Topic Tags

Views