Jump to content

- - - - -

Need navbar BG color same as page BG, prob w/Design Control

  • Please log in to reply
1 reply to this topic

#1 jeomiland†


    Advanced Member

  • DMS Subscriber†
  • 81 posts
  • Framework Version:2 and DMS
  • Country: Country Flag

Posted 05 July 2011 - 05:58 PM

Hi Thanks in advance for your insights. I wish to have the header area on this site: life-rising.com be the magenta color - including the upper navigation. Got the header BG color changed and used CSS to change the nav area BG, but since the actual nav items are LI boxes, how do you get them to be that magenta color also? I've tried using Design Control and changing Box Color - Primary Elements but that changes BG in places I prefer to Not have magenta (twitter bar, box around images,...). Using Firebug, I see the nav area is: #site #page #page-canvas #header #outline #primary-nav #texture #content #content-pad #nav-row and the UL forming the nav bar has: class="main-nav nosearch sf-menu sf-js-enabled sf-shadow" and the "current" LI element has: class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-16" and the other LI Nav elements have: class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89" Also, seems #primary-nav #texture spans the whole content area while #primary-nav #texture #content spans just the individual nav LI elements. The result is there is a pixel or 2 under the nav elements that are NOT showing the magenta BG, while the area to left and right of Nav elements have that extra on bottom. So where is the best place to add some custom CSS that will handle this? And what to put for these LI and/or UL elements style code? Also need to know how to adjust the hover and "not current" BG colors for these elements. Thanks so much for your help! JEO

#2 catrina



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

Posted 09 July 2011 - 04:33 PM

You'll need to add your custom CSS to the CSS box in Settings > Custom Code.

The hover background for menu items can be changed using this CSS:

Please Login or Register to see this Hidden Content

The "not current" background color menu items can be changed using this CSS:

Please Login or Register to see this Hidden Content