Full Width Background Color Nav Menu

[stefanoferruggiara 5]

Hi there, i would like to have a background color for the full width main menu. I had the css code but i lost. if i set to trasparent.. i see the content or page color but i have also a image background.. then or i set a css code that make my menu trasparent and the make it possible to see the image or better have a full width color that i can set for it. Someone can help me please? this is my code now: /* NAV BACKGROUND AND BORDER UNDER NAV */ .navigation_wrap { border-bottom: 1px solid #f37e2a !important; background-color: trasparent !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */ .main-nav li a { background-color: trasparent !important; color: #f37e2a !important; border-radius: 3px } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */ .main-nav li a:hover { background-color: #f37e2a !important; color: #fff !important; } /* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */ .main-nav .current-menu-item a { background-color: #f37e2a !important; color: #fff !important; } #secondnav ul li a { background-color: #000 !important; color: #f37e2a !important; border:1px solid #fff !important; border-radius: 3px } #secondnav ul li a:hover { background-color: #f37e2a !important; color: #fff !important; ; } #secondnav ul li.current-menu-item a, ul li.current-menu-item a:hover { background-color: #f37e2a !important; color: #fff !important; } #secondnav ul li.current_page_item a { background-color: #f37e2a !important; color: #fff !important; }

[Rob 547]

Stefano, did you lose the CSS that I gave you some time back? I should still have it. Just let me know and I can resend it.

[stefanoferruggiara 5]

Resend me my friend ... i lost it!

[Rob 547]

Here you go my friend! [code]/* NAV BACKGROUND AND BORDER UNDER NAV */ .navigation_wrap { border-bottom: 1px solid #bcbcbc !important; background-color: #e8ecef !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */ .main-nav li a { background-color: #e8ecef !important; color: #3f95c7 !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */ .main-nav li a:hover { background-color: #ffffff !important; color: #ff9c00 !important; } /* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */ .main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover { background-color: #ffffff !important; color: #ff9c00 !important; } .main-nav .current-menu-item ul li a { background-color: #e8ecef !important; color: #3f95c7 !important; }[/code]

[stefanoferruggiara 5]

Thanks Rob.. and i have this code.. i post up of yours.. i'm lookin' for a code that make entire background (not only content but all the width) of the menu. Like appear .. menu always on top..

[Rob 547]

I don't think I ever had that. Give me a day or so to research it and I'll let you know.

[Rob 547]

Stefano, try this, but change #C00000 to the color you want: [code]#nav .content-pad, #secondnav .content-pad { padding-bottom: 0px; padding-top: 0; } #nav {background:#C00000 !important;} .navigation_wrap {border-bottom:none;}[/code]

[stefanoferruggiara 5]

Robert, this is a screenshot of what you see with your code.. What is the white content between menu bar ad the black bar full width? We can take off? https://www.dropbox.com/s/9a0jv2v5nbeooa6/Schermata%2005-2456068%20alle%2017.11.32.png Robert.. i send you by email - credential for by pass Test Mode. (Edited to remove private email address info)

[stefanoferruggiara 5]

https://www.dropbox.com/s/9a0jv2v5nbeooa6/Schermata%2005-2456068%20alle%2017.11.32.png

[catrina 103]

Are you referring to the area where the "edit" link is?

[stefanoferruggiara 5]

Catrina.. i found the problem.. is the padding left and right that is not set to 0; now i have correct the code and all is ok.

[stefanoferruggiara 5]

I post for public use. This work perfect to fit the menu with content area in 'Content Width Page' selection and full width in 'Full-Width Sections'. Thanks Robert! ;) [quote]/* MENU FULL WIDTH */ #nav .content-pad, #secondnav .content-pad { padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; } #nav {background:#****** !important;} .navigation_wrap {border-bottom: none;}[/quote] PS: Change ****** with hex color code for set the background color. Es: 000000 for Black, ffffff for White.

[stefanoferruggiara 5]

The only one problem is: If i would like to have trasparent background that let me the possibility to see the Image Background and not the Content Color .. how i can do? Now, if i set to trasparent the background in color setting (leaving empty the color field) this cause the content text appear on the Image background. What i would like is control just the background of the header and nav menu that appear on the Image background and the rest of the site set it normally through the pagelines menu color setting in wp.

[Rob 547]

Stefano, As you know, CSS isn't my best skill. I will ask Danny or Jenny about this Monday. I know that for the menu, you don't want it to be fully transparent because then people won't know it's the menu. You need "semi-transparent", so they see the drop down background, but can see through it, with a shading. In your CSS Stefano, I do know you can just use padding: 0; instead of padding-top, right, left and bottom. Also, I do know that with CSS, when the value is 0, you don't need to add px at the end. That's only needed for values 1 or greater.

[stefanoferruggiara 5]

I don't know.. but this work ;) The usual problem is not the color but the possibility to customize the aspect.. with a nice bar.. or similar.. i buy some plugin from the pagelines store. I hope soon that will be inserted a plugin in the store or function in a menu that allows us to customize the aspect of nav menu. ;)

[stefanoferruggiara 5]

Always on top is not what i need.. i have tested Adobe MU for build site.. and the menu is very nice.. but i dont want to leave Pagelines theme for made new them with Abobe MU then.. i will wait for better solution or upgrade. ;) Now i try to find some different solution...

[Rob 547]

Stefano, I experimented with a few things and put everything back where it was. Please make a backup of your Custom Code (copy/paste to a Notepad or text file). I will post the suggestions here. They will need additional work.

[Rob 547]

Replace each of these items and you will get a transparent menu. However, the drop-downs and hovers change to a grey background. I'm not sure how to fix that yet. Try them each individually to see what they do. [code]#nav {background: none 0 0 rgba(0, 0, 0, 0.35) !important;} /* NAV BACKGROUND AND BORDER UNDER NAV */ .navigation_wrap { border-bottom: 1px solid transparent !important; background: none 0 0 rgba(0, 0, 0, 0.00) !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */ .main-nav li a { background: none 0 0 rgba(0, 0, 0, 0.00) !important; color: #fff !important; border-radius: 0px } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */ .main-nav li a:hover { background: none 0 0 rgba(0, 0, 0, 0.00) !important; color: #f37e2a !important; } #secondnav ul li a { background: none 0 0 rgba(0, 0, 0, 0.00) !important; color: #f37e2a !important; border:1px solid #eeeeee !important; border-radius: 3px }[/code]

[stefanoferruggiara 5]

That's .. now i will test and check ;) Many thanks

[stefanoferruggiara 5]

You know also how to make more high the menu bar..? Cause i have the code for the text but not the bar.. and i try with filezilla but nothing...

[Rob 547]

You need to adjust the padding of the branding area to move it up.

[buildingblocks 0]

Hi there, I have been working my way through this all afternoon. I manage to make some success using the code above (thank you!), and then suddenly the nav bar reverts back to its original limited-width setting. I don't know what is going on. I swapped the last bit of code for another that I found which worked for awhile, but it's now back to the way it was. I am just trying to make the main nav bar full-width color. I have scoured this forum and have tried everything to get it to stick but don't understand what's going wrong. I appreciate your help! The current code looks like this: /* MENU FULL WIDTH */ #nav .content-pad, #secondnav .content-pad { padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; } #nav {background:#104E8B !important;} .navigation_wrap { border:none !important; } And the site is www.buildingblocksalamedacounty.org I should also note that in order to get text next to my branding section, I FTP'd into my site and have made some direct edits to the Pagelines Customization .php and .css files, but nothing to do with the main_nav! Thank you, Dianna

[Rob 547]

Dianna, Do you have a Cache plugin on your site? If so, clear the cache. I see the nav bar in blue, full width. So, obviously, it worked. If you don't have a cache plugin, clear your browser cache and you should see it. Looks great.

[buildingblocks 0]

It actually started working again right after I sent you the email, but I didn't want to jinx it and tell you to forget it. I honestly wasn't expecting it to still be there in the morning, but it appears stable. Fingers crossed! Thank you.