Jump to content
Sign in to follow this  
338lm

Menu Hover Size

Recommended Posts

338lm

So I'm trying to make the menu of my current site (http://72.41.80.42/) look like my old site (http://idaholaw.us). I need help getting the menu to look the same on hover and current pages, (I'd like the red gradient to be the size of the old site and have the border dividers on either side). My current Custom Code is:

/*---------------------NAVIGATION---------------------*/ #primary-nav ul.main-nav {margin-left:130px;} #menu-nav{height:100px} #primary-nav {background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg.jpg); padding:20px 0 20px 0;} .main_nav .main-nav li a:hover{background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg);} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg);} /* remove the white navigation bar border*/ #nav_row.main_nav {border:0px;}

Share this post


Link to post
Share on other sites
Danny
Hi, Add the code below to your custom CSS or child theme style.css. [code].main_nav li a {padding: 30px 36px 30px 36px;} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {padding: 30px 36px 30px 36px;}[/code] For future reference, you could of done this very easily by using either Firebug or Google Chromes web dev tool.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
338lm
Danny, thanks for the tip, I usually use the dev tools and didn't even think to locate it that way... I think you guidance has me about half way there... I removed some of the css that I had and this is what I have now. [code] #primary-nav {background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg.jpg);} #primary-nav ul.main-nav {margin-left:130px; padding:0 0 0 0 !important;} .main_nav .main-nav li a:hover{background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg); padding: 30px 0px 30px 0px;} .main-nav li.current-page-ancestor a,.main-nav li.current_page_item a,.main-nav li.current-page-ancestor ul a,.main-nav li.current_page_item ul a {background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg); padding: 30px 0px 30px 0px;} #nav_row.main_nav {border:0px;}[/code] I'm still trying to make the menu item uniform in size and the text jumps on hover. any advice would be welcome!

Share this post


Link to post
Share on other sites
338lm
Okay, I figured out the better part of it, but still cant see where to add a border on each side of the menu links , and also cant see how to remove a 3-4px spacing between each item:[img]http://72.41.80.42/wp-content/uploads/2012/03/Screen-Shot-2012-03-30-at-4.33.06-PM.jpg[/img] My current code is: [code] #primary-nav {padding: 32px 0 32px 0; background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg.jpg);} #primary-nav li{float:none !important;display:inline !important;} #primary-nav a{float:none !important;display:inline !important;} #nav_row ul{ !important;float:none !important;text-align:center;} .main_nav .main-nav li a:hover{background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg); padding: 30px 15px 30px 15px; color: #FFFFFF; border-right:1px solid white; border-left:1px solid white;} .main-nav li.current-page-ancestor a,.main-nav li.current_page_item a,.main-nav li.current-page-ancestor ul a,.main-nav li.current_page_item ul a {color: #FFFFFF; !important; background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg); padding: 30px 15px 30px 15px;border-right:1px solid white; border-left:1px solid white;} #nav_row.main_nav {border:0px;}[/code] Thanks in advance for anyone who can tackel this!

Share this post


Link to post
Share on other sites
catrina
@339m The gaps between your menu items may be caused by margin spacing rather than padding. Do you have any other custom CSS that could be changing the margins?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
gyoery
.menu-item {margin:0px;} should do the trick. It's a quick fix, and u should try to figure out where u added those margins in the first place. That's why u should add this as the last line of custom css. Sorry 4 the comment b4... thought u wanted them there..

Share this post


Link to post
Share on other sites
338lm
Thanks for the help, I have added gyoery's suggestion to no avail. This is my complete Custom CSS list: [code]/*---------------------HEADER---------------------*/ #header{padding-top:10px;} /*---------------------FEATURE---------------------*/ #feature { margin: 0em 0 !important; } #feature-area { margin-top: 0px !important; } /* Removes the border and inner border */ #feature-footer { border: 0 none !important; } #feature-footer .feature-footer-pad { border: 0 none !important; } /*---------------------NAVIGATION---------------------*/ #primary-nav {padding: 32px 0 32px 0; background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg.jpg);} #primary-nav li{float:none !important;display:inline !important;} #primary-nav a{float:none !important;display:inline !important;} #nav_row ul{ !important;float:none !important;text-align:center;} #menu-main{border-right:1px solid white; border-left:1px solid white;} .main_nav .main-nav li a:hover{background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg); padding: 30px 15px 30px 15px; color: #FFFFFF; border-right:1px solid white; border-left:1px solid white;} .main-nav li.current-page-ancestor a,.main-nav li.current_page_item a,.main-nav li.current-page-ancestor ul a,.main-nav li.current_page_item ul a {color: #FFFFFF; !important; background:url(http://72.41.80.42/wp-content/uploads/2012/03/menu_bg_active.jpg); padding: 30px 15px 30px 15px;border-right:1px solid white; border-left:1px solid white;} #nav_row.main_nav {border:0px;} /*---------------------CONTENT---------------------*/ /*#dynamic-content {margin-bottom: -150px;}*/ /*---------------------BANNER---------------------*/ .banner-text { width: 70% !important; } .banner_container {margin:-60px 0 -90px -20px;} /*---------------------MOREFOOT---------------------*/ #morefoot{background:#363e42; color:#FFFFFF; text-color:FFFFFF#; padding: 10px 0 0 0 !important;} #morefoot a {color: #FFFFFF!important;} #morefoot .content{font-size:0.8em;} /*---------------------FOOTER---------------------*/ #footer {background-color: #22272A; width: 980px !important; margin: auto !important;} #footer .content{font-size:0.9em;} /*---------------------DIV COLUMN---------------------*/ div.col{padding: 0px 2px 0px 2px; width: 420px;} div.col div{float: left; font-size: small; width: 200px;} div.attcol{padding: 0px 0px 0px 15px; width: 960px;} div.attcol div{padding: 0px 10px 0px 10px; float: left; font-size: small; width: 440px; text-align: justify;} .menu-item {margin:0px;}[/code] I'm not spotting what would make the menu items maintain the spacing that they are. As always, thanks in advance for your assistance!!!

Share this post


Link to post
Share on other sites
catrina
By default, there shouldn't be any spacing at all between menu items, so something must be causing that. Try adding this CSS: [code]#nav_row ul li.menu-item {margin: 0px !important}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
338lm
Thanks Catrina, I tried it, but it still didn't work

Share this post


Link to post
Share on other sites
catrina
What happens when you add this? (I want to see if the items get nudged to the left): [code]#nav_row ul li.menu-item {margin-left: -4px !important}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
338lm
NAILED IT! That was it, thanks a million! Any idea how I could add a border to the edges of all the menu items on the right and left? Thanks again Catrina!

Share this post


Link to post
Share on other sites
338lm
Actually this is perfect.. I'm going to leave it the way it is. Thanks again!

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

Sign in to follow this  

×