additional CSS for nav menu
-
thanks to WPyogi and Andrew I was finally able to modify my nav-menu
problem in short here is my website check out nav menu
website
I’m tying to make this look like this
menudetails
I wan’t some more feature in my nav menu which wasn’t in the themes for ex : dotted border on one side. I was able to do this by removing border script and addingborder-right : 2pt dotted red !important;
im my custom css. here is my website.
these are all the nav menu option I can get from my theme/* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */ #header #navigation { display: block !important; margin-top: .382em; } #header #navigation ul.nav { float: right; /* LEVEL 2 */ /* LEVEL 3 */ } #header #navigation ul.nav > li a { border-right : 2pt dotted red !important; background: #fcfcfc; font-weight: bold; position: relative; -webkit-border-radius: 0em !important; border-radius: 0em !important; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #header #navigation ul.nav > li a:hover { border-color: #e8e3e3; background: #fff; } #header #navigation ul.nav > li:hover a { border-color: #e8e3e3; background: #fff; } #header #navigation ul.nav > li.current-menu-item > a, #header #navigation ul.nav > li.current_page_item > a { color: #ff0c00; } #header #navigation ul.nav > li.parent a { -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #header #navigation ul.nav > li.parent a:after { font-family: 'WebSymbolsRegular'; display: inline-block; font-size: .857em; margin-left: .618em; content: ";"; color: #e3d7d7; font-weight: normal; } #header #navigation ul.nav > li.parent a:hover:before { content: ""; display: block; height: 2px; position: absolute; bottom: -1px; left: 0; right: 0; background: #fff; z-index: 99999; } #header #navigation ul.nav > li.parent:hover a:before { content: ""; display: block; height: 2px; position: absolute; bottom: -1px; left: 0; right: 0; background: #fff; z-index: 99999; } #header #navigation ul.nav > li.parent:hover a:after { color: #ff0c00; } #header #navigation ul.nav > li.parent ul li a:after { visibility: hidden; } #header #navigation ul.nav > li.parent ul li.parent a:after { visibility: visible; content: "]"; float: right; } #header #navigation ul.nav > li.parent ul li.parent ul li a:after { visibility: hidden; } #header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after { visibility: visible; content: "]"; } #header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after { visibility: hidden; } #header #navigation ul.nav ul { border: 1px solid #e8e3e3; margin-top: -1px; padding: .372em 0; box-shadow: 0 0.202em 0 0 rgba(232, 227, 227, 0.4); -webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 227, 0.4); background: #fff; } #header #navigation ul.nav ul li a { border: 0; background: #fff; } #header #navigation ul.nav ul ul { left: 100%; top: -0.372em; } h3.nav-toggle { display: none;
but I want more option, right now my theme css treats both hover and dorp-down menu style as one css if I want different background color for hover and drop-down and I can’t do that ?? please help me out thanks in advance ??
- The topic ‘additional CSS for nav menu’ is closed to new replies.