menu

• 

  benagen · Member · Dec 8, 2014 at 1:46 am

  • Copy link
  • Add topic to favorites

  Home

  Hi,my dear helpers,
  I wonder how can I change apperance of my menu:
  1. Fonds (say all bold and changing to different color when click).
  2. More important: please take a look at my submenus-there is gap between them and main item. And also how can I change a color of subs-to make it more visual?
  Thanks again.
  Marina

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

• 

  jeremeylduvall · Member · Dec 8, 2014 at 6:55 pm

  • Copy link

  Hi Marina!

  Please see below. Each of the codes I provided would need to go under Appearance -> Customize -> CSS:

  Fonds (say all bold and changing to different color when click).

  Give this a try!

  .nav-menu {
  font-weight: bold;
  }
  
  .current-menu-item > a {
  color: red;
  }

  please take a look at my submenus-there is gap between them and main item.

  Are you referring to the gap shown here?

  http://d.pr/i/1lpKt

  If so, you could reduce that space using the following:

  .main-navigation a, .main-navigation li a {
  margin-bottom: -10px;
  }

  And also how can I change a color of subs-to make it more visual?

  You can use this to change the color/font:

  .main-navigation li ul li a {
  background-color: red;
  color: blue;
  }

• 

  benagen · Member · Dec 9, 2014 at 2:37 am

  • Copy link

  Thank you so mach for your help!
  Please take a look at a copy of my CSS that I applied.
  Some does work,some does not ( not changing colors ).
  Please advise.
  /* Set header link text color */
  #masthead hgroup h1 a {
  color: black;
  }

  /* Set header link text color, hover */
  #masthead hgroup h1 a:hover {
  color: #036564;
  }
  .nav-menu {
  font-weight: bold;
  }

  .current-menu-item > a {
  color: red;
  }
  .main-navigation a, .main-navigation li a {
  margin-bottom: -10px;
  }​
  .main-navigation li ul li a {
  background-color: red;
  color: blue;
  }​

• 

  jeremeylduvall · Member · Dec 9, 2014 at 4:02 pm

  • Copy link

  Hi!

  For the current menu item navigation color, you’ll want to use this:

  .main-navigation .current-menu-item > a {
  	color: red;
  }

  For the sub-menu navigation background and color, give this a try:

  .main-navigation div.nav-menu > ul, .main-navigation li ul li a {
  	background-color: red;
  	color: blue;
  }

  The other codes appear to be working correctly for me. Could you clarify which ones you’re having trouble with?

• 

  benagen · Member · Dec 10, 2014 at 3:48 pm

  • Copy link

  Thank you a lot.
  It fix it.
  Small problem though: How to make it when I click on my main menu only then submenus appear. IN my case they pop-up simultaneously.

  Home

• 

  jeremeylduvall · Member · Dec 10, 2014 at 5:30 pm

  • Copy link

  Small problem though: How to make it when I click on my main menu only then submenus appear. IN my case they pop-up simultaneously.

  I’m not sure what you mean by this. Do you not want the main menu items to be clickable? For example, you could hover your mouse over them and see the sub-menu but not click on the main menu item?

  If so, you can accomplish that through the instructions here:

  Menus