Style sub pages in the main nav

  • Hi. I can’t figure out how to style the sub pages listed under the parent in my main nav. I’m using the Youghurt template and Flexi Pages plugin. I’ve scoured the stylesheet and see it has a ul.navlist for the main nav but nothing for sub pages. How do I style them?

    I’ve been able to shift the margin over by styling ul.navlist ul ul li but that is all I can do. I can’t change colors or anything else. Thanks and here’s a link if you want to see the nav.

Viewing 1 replies (of 1 total)
  • Thread Starter christina.helen

    (@christinahelen)

    Hi, I’m still trying to fix this problem and would appreciate any suggestions someone may have. The sub nav still isn’t perfect and has a slight shift when I hover over. This is the code that came on the template stylesheet:

    /**** Main Menu ****/

#sidebar ul.navlist {
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 268px;
  font-size: 16px;
}

#sidebar ul.navlist li {
  display: inline;
  line-height: 0px;/* fix the unwanted gap between li elements in FF */
}

#sidebar ul.navlist li a {
  display: block;
  height: 30px;
  line-height: 30px;
  color: white;
  padding: 2px 2px 2px 24px;
  text-decoration: none;
  border-top: 1px solid #705A52;
  border-bottom: 1px solid #3E322D;
}

#sidebar ul.navlist a:hover {
  color: #877065;
  background-color: #443833;
  border-bottom: 1px solid #3E322D;
}

#sidebar ul.navlist li a.noborder, #sidebar ul.navlist li a:hover.noborder {
  border-bottom: none;
}

#sidebar ul.navlist .current_page_item a, #sidebar ul.navlist .current_page_item a:hover {
  background-color: #443833;
  cursor: default;
  color: #ffffff;
}

    This is what I added to style the sub pages and sub sub pages:

    /*Sub pages in main nav*/
#sidebar ul.navlist ul ul li a{
 display:block;
 margin-left:20px;
 border:none
}

#sidebar ul.navlist ul ul .current_page_item a, #sidebar ul.navlist ul ul .current_page_item a:hover {
  border:none;
  cursor: default;
  background-color:#56453E;
  color:#ffffff
}

/*Sub sub pages in main nav*/
#sidebar ul.navlist ul ul ul li a{
 display:block;
 margin-left:40px;
 border:none
}

#sidebar ul.navlist ul ul ul .current_page_item a, #sidebar ul.navlist ul ul ul .current_page_item a:hover {
  border:none;
  cursor: default;
  background-color:#56453E;
  color:#ffffff
}

    When you click on Classes and then it shows Adults and Youth, Adults and Youth keep the same styling as Classes (which I don’t want but not sure how to fix this). You can view my it here.

Viewing 1 replies (of 1 total)
  • The topic ‘Style sub pages in the main nav’ is closed to new replies.