Underline top nav bar

• 

  spacecakedesign · Member · Mar 20, 2018 at 8:46 am

  • Copy link
  • Add topic to favorites

  I wil create a yellow underline when i touch te text in de top nav bar. now i have big purple blocks.

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

• 

  shubhamgmath · Member · Mar 20, 2018 at 11:24 am

  • Copy link

  Hi spacecakedesign

  I wil create a yellow underline when i touch te text in de top nav bar. now i have big purple blocks.

  To create yellow line when touch the text you need to add this custom CSS code:

  li:hover {
      text-decoration: underline;
  }

  And to remove the background color you need to add the below code:

  .main-navigation li:hover, .main-navigation li:focus, .main-navigation a:hover, .main-navigation a:focus, .main-navigation ul ul, .main-navigation ul ul ul ul, .main-navigation ul ul ul ul ul ul, .main-navigation ul ul ul ul ul ul ul ul, .main-navigation ul ul ul ul ul ul ul ul ul ul, .main-navigation ul ul ul a:hover, .main-navigation ul ul ul a:focus, .main-navigation ul ul ul li:hover, .main-navigation ul ul ul li:focus, .main-navigation ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul li:focus, .main-navigation ul ul ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul ul ul li:focus, .main-navigation ul ul ul ul ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul ul ul ul ul li:focus, .main-navigation ul ul ul ul ul ul ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul ul ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul ul ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul ul ul ul ul ul ul li:focus, .main-navigation ul, .main-navigation ul li.current_page_item>a, .main-navigation ul li.current-menu-item>a, .main-navigation ul li.current_page_ancestor>a {
      background-color: inherit !important;
  }
  
  @media screen and (min-width: 60em)
  .main-navigation ul li.current_page_item>a, .main-navigation ul li.current-menu-item>a, .main-navigation ul li.current_page_ancestor>a {
      background: inherit !important;
  }

  Custom CSS can only be added if you are under premium or business plans. To know more about how to add custom CSS here is the support document for that:
  https://en.support.wordpress.com/custom-design/editing-css/

  To know more about plans features and pricing please refer to support link below:

  https://wordpress.com/pricing/

  Hope this helps, feel free to ask if you have any doubts.

• 

  thesacredpath · Member · Mar 21, 2018 at 12:26 am

  • Copy link

  Hi, you can also try this CSS to add a bottom border on your menu items when you hover them with a mouse.

  .main-navigation a:hover {
    border-bottom: 3px solid #FCD02F;
  }