Jump to content

Customize Nav Classic

Recommended Posts


Website URL: http://patdev.us
Framework Version: 2.4.1
WordPress Version: 3.5.1
Plugins in Use: Breadcrumb NavXT, Grid Shortcodes, LambertGroup - Zoom In/Out Effect Sliders Full Collection,

                         ThreeWP Activity Monitor, PageLines Googlefonts, Pagelines Sections, ThreeWP Activity Monitor, Xhanch - My              


Server/Host: HostGator



I am trying to style our website's menu similar to http://www.netdreams.co.uk/, however I am using Nav Classic and want the dropdown menu to stay closely the same to how it comes out of the box, but I need the main-nav to look like netdreams.co.uk


Currently here is all the CSS that I've applied to the menu/submenu:


//removes the "caret" (i.e. arrow) indicating submenu
span.sf-sub-indicator {
  display: none;

//padding around navigation
#nav .content-pad {
  padding: 0px;

//increase navigation font size
.main_nav {
  font-size: 106%;

//adjust font color on main nav
.main-nav a, .main-nav li a:hover {
  color: #ffffff;

//adjusts BG to menu
.main_nav_container.nosearch {
  background: rgb(30,56,63); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: -moz-linear-gradient(top,  rgba(30,56,63,1) 1%, rgba(15,15,15,1) 62%, rgba(1,1,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(30,56,63,1)), color-stop(62%,rgba(15,15,15,1)), color-stop(100%,rgba(1,1,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,56,63,1) 1%,rgba(15,15,15,1) 62%,rgba(1,1,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,56,63,1) 1%,rgba(15,15,15,1) 62%,rgba(1,1,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,56,63,1) 1%,rgba(15,15,15,1) 62%,rgba(1,1,1,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,56,63,1) 1%,rgba(15,15,15,1) 62%,rgba(1,1,1,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e383f', endColorstr='#010101',GradientType=0 ); /* IE6-8 */

.main-nav li a:hover, .main-nav li.current_page_item, .main-nav li.current_page_item > a, .main-nav li.current-page-ancestor > a {
background: url("http://patdev.us/wp-content/uploads/2013/03/hover3.png") repeat-x scroll 0 0 transparent!important;
  color: #ffffff;

//adjusts BG to menu hover
.main-nav a:hover:hover, .main-nav.sf-menu a:hover:hover {
  background: url("http://patdev.us/wp-content/uploads/2013/03/hover3.png") repeat-x scroll 0 0 transparent!important;
  background-size: 2px 33px;

/**********BEGIN DROPDOWN MENU CSS**********/
//adjusts font color on dropdown nav
.main-nav.sf-menu li li a:hover, main-nav.sf-menu li li a {
  color: #000000 !important;

//adjusts background of dropdown menu to white
.main-nav.sf-menu li li a:hover:hover {
  background: #ffffff !important;

.sf-menu li li a {
  color: #000000 !important;

/**********END DROPDOWN MENU CSS**********/

/**********END NAVIGATION CSS**********/


However, there are a few problems that I'm having.  I need the background with blue top border to stay on active page, even if it is a child nav item that is the active page WITHOUT making the active background of the subnav have the same background.  Also, when "Company" is the active page, it has a white background... I can't figure out why it does this on the "Company" page alone. 

Last but not least - the blue-top-border-bg shows about 1px black space above the blue bar when hovering, yet I can not figure out how to remove it. 


If anybody can help, I'd greatly appreciate it!



Share this post

Link to post
Share on other sites
James B

Hi Steve


Ok the black line is being caused by the 'border-width' command in the below css you have on the site.


.main_nav ul li a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    display: block;
    line-height: 1em;
    text-decoration: none;

I see all the pages with a white background (firefox mac) how are you setting the bg color? Via the color control tab or in css?


I'm not sure I've following the part about the active menu, you mean the menu at the top of the page you want to keep the blue line on the parent item when the child page is active? You could try using the ID for the menu item to control that.


#menu-item-498 a:active {
background: url();

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now