Jump to content


Photo
- - - - -

Full Width Background Color Nav Menu


  • Please log in to reply
23 replies to this topic

#1 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 09 May 2012 - 09:17 PM

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 May 2012 - 11:30 PM

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.

#3 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 10 May 2012 - 01:27 AM

Resend me my friend ... i lost it!

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 May 2012 - 03:03 AM

Here you go my friend!

Please Login or Register to see this Hidden Content



#5 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 10 May 2012 - 01:57 PM

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

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 May 2012 - 06:15 PM

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

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 May 2012 - 06:36 PM

Stefano, try this, but change #C00000 to the color you want:

Please Login or Register to see this Hidden Content



#8 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 03:13 PM

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?

Please Login or Register to see this Hidden Content

Robert.. i send you by email - credential for by pass Test Mode. (Edited to remove private email address info)

#9 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 03:13 PM

Please Login or Register to see this Hidden Content



#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 20 May 2012 - 04:59 PM

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

#11 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 07:03 PM

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.

#12 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 07:06 PM

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

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


PS: Change ****** with hex color code for set the background color.
Es: 000000 for Black, ffffff for White.

#13 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 07:14 PM

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.

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 May 2012 - 08:19 PM

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.

#15 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 08:24 PM

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

#16 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 08:27 PM

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

#17 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 May 2012 - 08:55 PM

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.

#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 May 2012 - 08:57 PM

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.

Please Login or Register to see this Hidden Content



#19 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 09:05 PM

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

#20 stefanoferruggiara

stefanoferruggiara

    Advocate

  • Members
  • 564 posts
  • LocationVerbania (VB) - Italy
  • Country: Country Flag

Posted 20 May 2012 - 09:07 PM

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