Jump to content
Beny Schonfeld

Can't Get The Nav Bar Css To Work! Please Help

Recommended Posts

Beny Schonfeld    1
Beny Schonfeld

Hi folks, I've tried everything... I've searched through the forums, docs, etc, tried all the CSS I could find in here and nothing... I can't find the way to customize the colors of my nav bars properly.

The URL: http://designsbyfelicia.com

There's 2 nav bars I'm customizing: the brandnav (purple header section with logo and nav), and the classic nav (black nav bar)

Here are the problems:

1. on the Brandnav, I've managed to code everything I wanted properly except the "li" active state when the user is on a child page. For example, the "services" page has a couple of child pages. When a user is in one of those, there's a white background in the "services" link that I can't find a way to remove (should be transparent, or the same purple color as background). Go to this child page so you can see: http://designsbyfelicia.com/services/custom-furniture-cabinetry/

2. On the Black Nav bar, I'm trying to simply do this:

- no background color on hover

- text color gray

- text color hover: light purple

- text color active: dark purple

That's all!!! And yet nothing I code seems to have an effect...

Here's my CSS code for these two sections at the moment:


#brandnav {

  background-color: #7e60c4;

  border-top: 1px solid #9c85d2 !important;

  border-bottom: 1px solid #000000 !important;

}

#brandnav .content-pad {

  padding: 0em 0 1em 0;

}

#brandnav .brandnav-nav {

  position: relative;

  top: 20px;

}

#brandnav .brandnav-nav ul#menu-brandnav {

  font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 20px !important;

  color: #333333;

  text-shadow: 1px 1px 0 #9c85d2 !important;

}

#brandnav .brandnav-nav ul#menu-brandnav li a {

  color: #333333;

  padding: 10px;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}

#brandnav .brandnav-nav ul#menu-brandnav li a:hover {

  color: #eeeeee !important;

  text-shadow: -1px -1px 0 #222222 !important;

  background-color: transparent !important;

}

#brandnav .brandnav-nav ul#menu-brandnav li:hover {

  background-color: transparent !important;

}

#brandnav .main-nav li:hover,

#brandnav .main-nav .current-menu-ancestor a,

#brandnav .main-nav li.current-menu-ancestor ul a,

#brandnav .main-nav li.current_page_item a,

#brandnav .main-nav li.current-menu-item a,

#brandnav .main-nav li.current_page_parent a,

#brandnav .sf-menu li li,

#brandnav .sf-menu li li li {

  background-color: transparent !important;

  color: #eeeeee !important;

  text-shadow: -1px -1px 0 #222222 !important;

}



#nav.container div.texture {

  background-color: #333333;

  border-top: 1px solid #9c85d2 !important;

  border-bottom: 1px solid #555555 !important;

  box-shadow: 0 0 6px #222222;

  -moz-box-shadow: 0 0 6px #222222;

  -webkit-box-shadow: 0 0 6px #222222;

}

#nav.container div.navigation_wrap.fix {

  border: none !important;

}

#nav.container .main-nav ul#menu-main-navigation li {

  font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 20px !important;

  color: #eeeeee !important;

  text-shadow: -1px -1px 0 #000000 !important;

}

#nav.container .main-nav ul#menu-main-navigation li li a {

  color: #eeeeee !important;

  border-right: 1px solid #222222 !important;

  border-left: 1px solid #999999 !important;

  background-color: #333333 !important;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}

#nav.container .main-nav ul#menu-main-navigation li li a:hover {

  color: #baaae0 !important;

  background-color: #333333 !important;

}

#nav.container .main-nav ul#menu-main-navigation li li:hover {

  background-color: #333333 !important;

}

#nav.container li#menu-item-685 a {

  border-left: none !important;

}

#nav.container li#menu-item-688 a {

  border-right: none !important;

}

#nav.container .main-nav .current-menu-ancestor a,

#nav.container .main-nav li.current-menu-ancestor ul a,

#nav.container .main-nav li.current_page_item a,

#nav.container .main-nav li.current-menu-item a,

#nav.container .main-nav li.current_page_parent a,

#nav.container .sf-menu li li,

#nav.container .sf-menu li li li {

  background-color: #333333 !important;

  color: #baaae0 !important;

}

#navbar.container.no_clone.section-navbar.fix {

  background-color: #333333;

  background-repeat: repeat-x;

  background-image: -khtml-gradient(linear, left top, left bottom, from(#555555), to(#333333));

  /* Konqueror */

  background-image: -moz-linear-gradient(#555555, #333333);

  /* FF 3.6+ */

  background-image: -ms-linear-gradient(#555555, #333333);

  /* IE10 */

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #333333));

  /* Safari 4+, Chrome 2+ */

  background-image: -webkit-linear-gradient(#555555, #333333);

  /* Safari 5.1+, Chrome 10+ */

  background-image: -o-linear-gradient(#555555, #333333);

  /* Opera 11.10 */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#333333', GradientType=0);

  /* IE6 & IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#333333', GradientType=0)";

  /* IE8+ */

  background-image: linear-gradient(#555555, #333333);

  /* the standard */

  box-shadow: 0 0 6px #333333;

  -moz-box-shadow: 0 0 6px #333333;

  -webkit-box-shadow: 0 0 6px #333333;

  border-top: 1px solid #9c85d2;

  border-bottom: 1px solid #555555;

}

#navbar.container.no_clone.section-navbar.fix div.content {

  width: 99% !important;

}

#navbar.container.no_clone.section-navbar.fix div.content div.content-pad {

  padding: 0 !important;

}

#navbar.container.no_clone.section-navbar.fix div.content div.content-pad div.navbar.fix.navbar-content-width.pl-color-black-trans {

  border-radius: 0 !important;

  -moz-border-radius: 0 !important;

  -webkit-border-radius: 0 !important;

  -moz-background-clip: padding !important;

  -webkit-background-clip: padding-box !important;

  background-clip: padding-box !important;

  background-image: none !important;

  box-shadow: 0 0 0 transparent !important;

  -moz-box-shadow: 0 0 0 transparent !important;

  -webkit-box-shadow: 0 0 0 transparent !important;

}

#navbar.container.no_clone.section-navbar.fix div.content div.content-pad div.navbar.fix.navbar-content-width.pl-color-black-trans div.navbar-content-pad.fix {

  padding: 0 5px !important;

}

#navbar.container.no_clone.section-navbar.fix div.content div.content-pad div.navbar.fix.navbar-content-width.pl-color-black-trans div.navbar-content-pad.fix #menu-mobile-device-menu li a {

  text-shadow: -1px -1px 0 #000000;

  padding: 10px 10px !important;

}

I appreciate your help with this! We're going live on Friday with the site so I need to resolve this ASAP.

I would also like this opportunity to suggest something to you for a future update: Your framework is so advanced, it great! Customizing Nav colors should not be this hard! I've spent hours and hours on this... Why isn't there a color picker in the admin setting for each nav bar section??? Just include color pickers for text color, background, border, and for normal, hover and active states and you should be able to shake this issue off for good! (I've noticed it's a recurrent issue people have)

Thanks again!

Beny Schonfeld


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

1. The selector for your active link needs to be adjusted. When I inspect the active menu item using Firebug, I see this class:

menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-680
You need to use the current-page-ancestor selector to adjust the active item. 2. In this code, the extra li tags are unnecessary (i.e. li li a can just be li a):
#nav.container .main-nav ul#menu-main-navigation li li a {

  color: #eeeeee !important;

  border-right: 1px solid #222222 !important;

  border-left: 1px solid #999999 !important;

  background-color: #333333 !important;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}

#nav.container .main-nav ul#menu-main-navigation li li a:hover {

  color: #baaae0 !important;

  background-color: #333333 !important;

}

#nav.container .main-nav ul#menu-main-navigation li li:hover {

  background-color: #333333 !important;

}

#nav.container li#menu-item-685 a {

  border-left: none !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
Beny Schonfeld    1
Beny Schonfeld

OK, making progress...

On Brandnav, by targeting the following selector I was able to finally remove that white background,...


li#menu-item-680.menu-item.menu-item-type-post_type.menu-item-object-page.current-page-ancestor.menu-item-680 a

As for the other navigation bar, the black one, I tried what you suggested above and nothing. Same result... I don't understand it!

Any other suggestions?


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

OK, I went back and deleted all the CSS I had done for the second nav bar (the black one). I simplified a couple of things and now it seems to be working perfectly... I have no idea why I couldn't get this to work before... Maybe I just needed to let it sit for a couple of days :)

Here's the CSS I'm using now:


#nav.container div.texture {

  background-color: #333333;

  border-top: 1px solid #9c85d2 !important;

  border-bottom: 1px solid #555555 !important;

  box-shadow: 0 0 6px #222222;

  -moz-box-shadow: 0 0 6px #222222;

  -webkit-box-shadow: 0 0 6px #222222;

}

#nav.container div.navigation_wrap.fix {

  border: none !important;

}

#nav.container ul li {

  border-right: 1px solid #222222 !important;

  border-left: 1px solid #555555 !important;

}

#nav.container ul li a {

  font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 20px !important;

  color: #eeeeee !important;

  text-shadow: -1px -1px 0 #000000 !important;

  background: transparent !important;

  padding: 5px 14px;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}

#nav.container ul li a:hover {

  color: #baaae0 !important;

}

#nav.container .main-nav .current-menu-ancestor a,

#nav.container .main-nav li.current-menu-ancestor ul a,

#nav.container .main-nav li.current_page_item a,

#nav.container .main-nav li.current-menu-item a,

#nav.container .main-nav li.current_page_parent a,

#nav.container .sf-menu li li,

#nav.container .sf-menu li li li {

  color: #baaae0 !important;

}

#nav.container li#menu-item-685 {

  border-left: none !important;

}

#nav.container li#menu-item-688 {

  border-right: none !important;

}


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent, I'm glad you got it sorted. Thank you for sharing the solution with us.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

The topic was marked as resolved.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
×