Mobil menu sub items look

• 

  dermavanzada · Member · Oct 13, 2016 at 2:44 pm

  • Copy link
  • Add topic to favorites

  I would like to change the look of the sub menu items on the mobil menu, so the visitors can clearly see a difference between sub menu items and top level ones. (this menu sub items: https://drive.google.com/open?id=0B2cEMmM2ORERWEl6ZjNaMjF1UTQ —-) It can be a change in color or a smaller size of letter. (but without affecting the color and appearance of the desktop version of the menu. I would like to do the change only for the Mobil version menu. The theme I’m using is: purpose. The site I need help with is: dermavanzada.com”

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

• 

  siobhyb · Member · Oct 14, 2016 at 11:10 am

  • Copy link

  Hi there,

  The background colour to sub menu items on mobile devices could be changed with the following custom CSS snippet:

  .mobile-menu .sub-menu {
      background: #f9f9f9;
  }

  You can change the value of background from #f9f9f9 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

  http://www.color-hex.com/

  The colour of the links could then be changed with the following snippet:

  .mobile-menu .sub-menu a:link font, .page .mobile-menu .sub-menu a:hover font, .page .mobile-menu .sub-menu a:visited font {
      color:  #ccc;
  }

  As before, feel free to have an experiment with different colours! :)

• 

  dermavanzada · Member · Oct 15, 2016 at 6:48 am

  • Copy link

  I can change the sub items background, but not the main items. I need. On mobil devices One color for the top level pages links and one color for the sub items. And this is not working apparently or I’m doing something wrong. Please help me or explain me better

• 

  siobhyb · Member · Oct 15, 2016 at 9:51 pm

  • Copy link

  I can see you’ve changed the background for sub menu items. Great! :)

  The background for parent items can then be changed with the following snippet:

  .mobile-menu > li {
      background: #f9f9f9;
  }