Nav menu background color

Support Area Forums Grassroots Nav menu background color

Viewing 7 posts - 1 through 7 (of 7 total)
URL to the page in question: http://
  • Author
    Posts
  • #34421
    naegon
    Participant

    Hi,

    I have a question regarding the navigation menu. I’m using a hero image as the background of my home page and I’ve been able to change the colors of the nav menu items.

    question # 1 – As I scroll down my home page the nav menu background becomes white. Is it possible to change that into another color, only as I scroll down. I’ve checked everywhere but can’t find that option, only for the navigation menu items.

    question #2 – Is it possible to change the nav menu background color on the other pages of my website? Again, I’ve only managed to change the color of the items.

    Thanks,

    Nathy

    #34426
    naegon
    Participant

    I just read the forum tips. I see it’s handy to add the URL, but my website is not online yet.

    #34431
    Bill Robbins
    Moderator

    Hi Nathy,

    Great question. I believe you are correct, I don’t see an option to change that. I’ll add that for the next theme update. Until then you can change the navigation bar color this way:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      #header,
      body.hero #header.scroll {
      	background-color: #ffffff;
      	border-bottom-color: #dfdfdf;
      }
      
    3. Change the #ffffff to the color you’d like to have as the background and the #dfdfdf to the border color you’d like to have there.
    4. Update your settings.

    See if that won’t allow you to change the navigation bar color. It’ll affect the default pages and pages with a hero once you’ve scrolled down a bit.

    Let me know if you run into any trouble.

    Thanks,
    Bill

    #34475
    naegon
    Participant

    Hi Bill,

    Thanks for you reply! It was very helpful, but I’ve encountered other problems. I’m doing the website for an organization and they expect certain customization which I thought was possible, but I can’t figure it out on my own.

    Two issues:

    #1 – The navigation menu color is dark and I would like it to be a little lighter when you scroll down. On the Grassroots demo the scroll down menu has a fade-out effect, is it possible to get that as well?

    #2 – When I add a hero image to the pages, there’s a bigger margin than I would like to between the image and the page title. Is there a way to fix it. I’ve attached a screenshot.

    Once again, thank you for your help!

    Nathy

    #34479
    Bill Robbins
    Moderator

    Good Morning Nathy,

    Let’s see if we can find answers for you.

    1 — On a page with a hero at the top, the navigation bar should change to having a solid background color after the browser has scrolled down 100 pixels. It should be transparent when you’re at or near the top and then change as the site has been scrolled just a bit away from the top of the window.

    If the header is still transparent after scrolling down 100+ pixels it could indicate there is a javascript conflict someplace. I use jQuery to add a class to the header to change the color and a conflict would keep that from happening. It could be that a plugin is causing an issue or it could be that a resource isn’t loading and that’s causing the error.

    Since the site isn’t visible via the internet we could do this. If you want to view the source of the page where that isn’t working, make a copy of it, paste it at http://gist.github.com
    and then add the URL to that gist here, I can see if I can spot the error.

    2 — You’re welcome to move your content closer to the hero area. With the content wrap being the same color as the site background that can be a good thing. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      #wrap {
      	margin-top: 20px;
      }
      
    3. Update your settings.

    See if that’s about the right distance. Feel free to change the 20px to a larger number (move the content down) or a smaller one (move the content further up) to fit your needs. The default is 100px.

    Let me know about the header and we’ll go from there.

    Thanks,
    Bill

    #34537
    naegon
    Participant

    Hi Bill,

    I think you’re right about a conflict somewhere. I noticed several other issues. My page is online now, even though it’s not ready, so maybe you can check it out? http://publicleadership.foundation

    #1 – The info you gave me for the alignment helped perfectly for the title of the page, but is it possible to also align the top of my sidebar with the title of the page. It’s a bit higher than the title and I would like for them to be at the same height if possible.

    #2 – I changed the colors of the nav menu, so the transparency of the menu is not an issue for me anymore, but I noticed other things when I scroll down. I can’t change the item colors, the scroll down background, etc. I want it to look like it does on top of the homepage, but I still get the default colors set for this theme.

    #3 – When I go to my ABOUT page from the top nav menu and hover on ABOUT on that page the drop down menu pops up but the hover color doesn’t change, even though I changed it. On my SPONSORS page (on my website I renamed it PARTNERS) the navigation items and hover colors don’t change it all, even though I changed it.

    I know it’s a lot of issues and hopefully you can help me fix them. I’d really appreciate your help with this.

    Nathy

    #34543
    Bill Robbins
    Moderator

    Good Afternoon Natty,

    Thanks for placing this online. That really helps out with helping out. Let’s see if we can find answers for you:

    #1 — You can move the top of the text in the sidebar down just a bit. Add this to your Custom CSS to do that:

    
    #sidebar {
    	padding-top: 5px;
    }
    

    #2 — The default colors for the navigation are set in the theme options page. Looking through the source code there it doesn’t look like it’s been changed there. When you add navigation colors to the hero options on a page, it only changes them at the top before the page is scrolled. The colors beyond that point are the same on every page and are set in the theme options. The hero area colors are for exceptions on pages where the default colors don’t work with the hero background. The theme option colors are the ones you’d expect to find most places. Does that make sense?

    #3 — I think it’s the visited state that causing trouble there. Before I visited any of the sub items they hovered as expected, but once I visited them. I have an update to the theme that I’ll release in the morning that should take care of that for you. The update will appear in the updates section of your dashboard where WordPress core and plugin updates are listed.

    Have a great weekend and let me know if you need anything else,
    Bill

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Nav menu background color’ is closed to new replies.