Jump to content


Photo
- - - - -

Navbar-How to adjust to a custom color, and drop-downs sub-pages?

navbar; custom color sub-menu sub-pages custom color navbar color

This topic has been archived. This means that you cannot reply to this topic.
11 replies to this topic

#1 acasablanca

acasablanca

    Member

  • Members
  • 13 posts

Posted 28 December 2012 - 12:35 PM

Hi there,

 

I would like to make some tweaks to the look of my Navbar:

 

1) Adjust the navbar color to choose a custom color (I already have the RGB code)

2) Give the Navbar the functionality of drop-down sub-menu pages that appears only when I point the mouse finger to the particular Navbar page. (this is a functionality very common in many pages nowadays).

 

Btw, I read a couple of threads and documents here but I couldn't find how to do it. 

 

Appreciate your help.

 

Alex



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts

Posted 28 December 2012 - 12:52 PM

Hi Alex,

 

1. This would require custom CSS, if you have the RGBA code, then you're half way there. All you need to do is inspect the NavBar using Firebug or your browsers web dev tools and then copy the CSS that gives the NavBar its background color. Then add this code to a text editor, make your changes and then add that code to your custom CSS.

 

2. The NavBar click to access the drop down menus is based on Bootstrap, this functionality is part of the NavBar and can not be changed, as far as I know. If you wish to have a navigation menu where you hover over menu items to access the drop down menu/sub menu. I recommend you replace the NavBar with the Nav Classic section.



#3 acasablanca

acasablanca

    Member

  • Members
  • 13 posts

Posted 28 December 2012 - 03:40 PM

Thanks Danny, I will go ahead and try to do it. I'm using Mozilla, do you know is the Firebug functionality is already embedded in the browser or if I will have to download the add on?



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 28 December 2012 - 04:00 PM

Firebug is an add-on you can get from Firefox.



#5 acasablanca

acasablanca

    Member

  • Members
  • 13 posts

Posted 28 December 2012 - 04:58 PM

Thank you. I will work on the color thing with Firefox. 

 

Regarding the drop-down menu navigation, What I want to accomplish is that when I place the pointer on top of one of the pages in the navbar, the sub-pages title appears drop-down and then disappear when you move the pointer to the other menu options. This is what I already did:

 

- First, I switched to the Navbar classic as Danny suggested and now noticed the navbar turned all white (I tried to change the color back to black, but even when I selected the option it didn't change).

- Second, I created four sub-pages in the Pages section.

-Third, I created a menu using the menu functionality and placed the sub-pages on the menu.

 

After doing that, the sub-pages appeared in the menu navbar, but the main pages disappeared. I guess I should be doing something wrong.

 

Any help will be appreciated. 



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 28 December 2012 - 06:04 PM

Do you have a live link you can post?



#7 acasablanca

acasablanca

    Member

  • Members
  • 13 posts

Posted 28 December 2012 - 07:01 PM

Do u mean my URL? It is

Please Login or Register to see this Hidden Content

It's live now



#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 28 December 2012 - 07:17 PM

Which page has the subpages you set up?



#9 acasablanca

acasablanca

    Member

  • Members
  • 13 posts

Posted 28 December 2012 - 08:12 PM

The page named "Seguros Comerciales" is the Parent page, it is the third page from left to right in the navbar. There are 4 sub-pages created and published (but not seen, don't know why) under the Parent page "Seguros Comerciales". Both the Parent and the sub-pages are assigned to the same Page Template.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 29 December 2012 - 01:45 AM

We have a plugin called Simple CSS Lite which can help you style the Nav Classic menu.

 

Do you have a cache plugin activated?   If so, please make your changes to the design, then clear the plugin's cache.  You'll then see the changes implemented.



#11 acasablanca

acasablanca

    Member

  • Members
  • 13 posts

Posted 29 December 2012 - 02:22 AM

Just downloaded and activate the Simple CSS Lite, I'm going to try to configure the navbar colors. I don't know what is the cache plugin. It's a different plugin that I have to install?



#12 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 29 December 2012 - 02:36 AM

Hi there

 

You'd know if you had one installed as its something you would have installed previously.

 

No, you don't need a cache plugin, Rob was just saying if you did have one to turn it off prior to making the changes as it could stop the changes from taking affect.