• 0
Sign in to follow this  
Followers 0

Full Width Background Color Nav Menu

Question

Posted · Report post

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; }

Share this post


Link to post
Share on other sites

23 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Resend me my friend ... i lost it!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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..

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

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  
Followers 0