Optimize menu (mobile / desktop)

• 

  fredrikstrietz · Member · Jun 6, 2020 at 3:58 pm

  • Copy link
  • Add topic to favorites

  Dear all / support,

  I’m using the theme “Healthy Living”.

  Currently the menu in mobile view is very long (because all menues are open in default) and the Main/Top-Topics are not easy to see between all the other text.
  –> How can I:
  1. make the top/main menue topics bold (marked in picture)?
  2. Is it possible not to see all menues expaned by default (has to be expanded manually for each part/menu)?
  3. Change the colour in the menu (mobile / not mobile) of
  A) “menue text”,
  B) “selected menue text”,
  C) “unselected text background in menue”,
  D) “selected text background in menue”

  Picture here: https://drive.google.com/file/d/1Kun95X7H-cDS78jZ_1hF40Z6e0EBAWcQ/view?usp=sharing

  I think there will be css code…?

  Thanks in advance!
  Fredrik

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

• 

  supernovia · Staff · Jun 9, 2020 at 12:06 am

  • Copy link

  Hi there, right now everything is expanded on the mobile menu. Are you seeing something else?

  And this CSS will adjust the colors and font-weights. You’ll need to adjust the colors as you like.

  /* bold submenu titles */
  .menu-item-has-children {
      font-weight: bold;
  }
  
  /* unbold below */
  .sub-menu {
      font-weight: normal;
  }
  
  /* hover colors */
  .navigation-main ul ul a:hover {
      background-color: #ffdddd;
  	  color: white;
  }
  
  /* current */
  .navigation-main li li.current_page_item>a, .navigation-main li li.current-menu-item>a {
  	background-color: #ffcccc;
  	color: #fff;
  }
  
  /*mobile*/
  .main-small-navigation li, .main-small-navigation a {
      color: #000;	  
  }
  
  .main-small-navigation ul, .menu-toggle {
      background-color: #ffeeee;
  }

• 

  fredrikstrietz · Member · Jun 9, 2020 at 5:49 am

  • Copy link

  Thank your very much for your good support! It works as it should!