Jump to content
acasablanca

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

Recommended Posts

acasablanca    1
acasablanca

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
acasablanca    1
acasablanca

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?

Share this post


Link to post
Share on other sites
acasablanca    1
acasablanca

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. 

Share this post


Link to post
Share on other sites
acasablanca    1
acasablanca

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
acasablanca    1
acasablanca

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?

Share this post


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

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.


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

    • alisamski
      By alisamski+
      Hi,
       
      I cannot seem to see navbar css color changes in the desktop version of safari?
      Works fine in Firefox and Chrome and safari on mobile ios.
       
      Anyone available to check?
       
      Should show as a lite-grey to navy.
       
      Here is the link. 
      http://bit.ly/1hmq2oV
       
      Thank you.
       
       
    • margeau
      By margeau
      Hi,
       
      I am using the standard navbar - base color theme in the current DMS / WP versions. I am trying to change or eliminate the color of the highlight under the menu items on hover and while viewing the pages linked a menu item. It is a cool effect, but I don't want to use it in this instance. I have been trying to change the color to the background color of my nav section all afternoon using every idea I found on this forum, but I was unsuccessful and thought that perhaps since the base color theme looks different, it may controlled by different CSS.
       
      I also used Firefox's and Google's development tools to try identify the code, but no success there either.
       
      The site is not live to viewers, but live to be accessed if that helps: http://dev.ochocodental.com/wordpress/
       
      Just to clarify, I am pleased with the site's link color being implemented for the drop down highlight color (thank you for doing that as I remember struggling with the in Pagelines Framework), I just want to mask or eliminate the color highlight under the menu items on hover and when visiting the page linked to the menu item.
       
      Many thanks to anyone who can help me over this hurdle so I can get on to the next one.
       
      Margeau
    • cerchris
      By cerchris
      Hi There
       
      I am trying to change the background colour behind the sub-menu links in the dropdown menu on this page

      http://thelearningroom.co.nz/?page_id=23
       
      It is currently grey and I want it to be the same color as the background of the topline links.
       
      I am using the firebug selector tool but it is very hard to get the right selector to change the css for this, as firefox is not displaying the dropdown correctly. When I hover over a topline link like "Solutions", the dropdown menu appears but when I move the cursor down the dropdow menu disappears. This problem seems to only be happenign in Firefox.
       
      So I have 2 questions:
      1- Is there anything I can do to help the dropdown display in Firefox?
      2- Can you please give me some help with the correct css selector to change the background color and font size of the submenu links in the dropdown
       
      many thanks for your help
×