Archived

This topic is now archived and is closed to further replies.

  • 0

Navable changing color of nav

Question

Posted · Report post

Hi there, I've been looking around since installing the plugin and haven't been able to find where to set the base color. I looked under Site Options and nothing...what am I missing? Thanks in advance!

Thanks!

Tan

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Never mind — Changed the setting in the site defaults. Works now.

Share this post


Link to post
Share on other sites

Posted · Report post

Well, I tried changing the colors on the Navable bar in its setting. Nothing stuck. Still basic gray. WHy would that happened?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi!

The base color is derived from your sites background color. ;) FWIW, all of my sections are styled with LESS against what the user has set for the sites body background color set in Color Control.

 

Nick

Share this post


Link to post
Share on other sites

Posted · Report post

hi nick, thanks for your response. i see your plugin overview says that you have two color options and that it would be base color and text color but that description does not really illustrate how little control one has over the colors without really having to tweak all the css. I have a feeling a lot of people find these plugins helpful and pay for them because it gives them easier styling control so they don't have to do a lot of extra work out of the box. I am one of those people. 

 

Anyway, I tried changing the background color it didn't change anything. Please see the screenshot of my color control.  6fsEUin.png

The navigation background didn't change at all. 

 

The site is: http://nari.mpwclient.com/

 

The top nav is Navable, the bottom nav is what I'm trying to get it to look like (I need your mobile functionality and dropdowns).

 

So then I tried tweaking the CSS but then I lost the drop down functionality. Not sure why. 

Here's what I started doing: 

[codesyntax]#ba-navable .main-nav li a, .ba-navable-menu li a {
color: #FFFFFF;
display: block;
margin: 4px 15px;
padding: 5px;
text-decoration: none;
text-shadow: none;
}
#ba-navable {
background-color: #B81121;
background-image: -moz-linear-gradient(center top , #B81121, #B81121);
background-repeat: repeat-x;
}
#ba-navable .main-nav li:hover, .ba-navable-menu li:hover {
background-color: #A51223;
background-image: -moz-linear-gradient(center top , #A51223, #A51223);
background-repeat: repeat-x;
box-shadow: none;
}
#ba-navable .main-nav li.current-menu-item, #ba-navable .main-nav li:active, .ba-navable-menu li.current-menu-item, .ba-navable-menu li:active {
background-color: #A51223;
background-image: -moz-linear-gradient(center top , #A51223, #A51223);
background-repeat: repeat-x;
box-shadow: none;
}
.ba-open-navable {
-moz-box-sizing: border-box;
background-color: #B81121;
background-repeat: no-repeat;
border: 0 none;
color: #FFFFFF;
display: none;
float: left;
font-size: 1.7em;
padding: 6px 10px;
text-shadow: none;
}
#ba-navable .main-nav li.current-menu-item a, #ba-navable .main-nav li:active a, .ba-navable-menu li.current-menu-item a, .ba-navable-menu li:active a {
color: #FFFFFF;[/codesyntax]

 

Do you have any advice on what I'm doing wrong?
Thank you! 

Share this post


Link to post
Share on other sites

Posted · Report post

Great, glad to hear. Please let me know if there's anything else I can do for you.

Share this post


Link to post
Share on other sites

Posted · Report post

You are correct Navable has it's own color controls."Base Color" sets the overall color of the entire section. All other colors, are automatically derived from the base color you set. These are under Page Options--->Navable.

Share this post


Link to post
Share on other sites