Managing Main Menu Text Colours

  • Hello lovely people,

    First, thank you for the lovely Customizr theme.

    I have set up a practice website to help me learn about how to customise Customizr:

    hipstercoffeeco.marygnolan.com/

    I’ve found the contributions on this forum really useful to get me well on my way but I’m still stuck with a couple of issues. For the sake of clarity I’ve numbered them below:

    1. How do I change the menu text from cream to brown when the user scrolls? This is because brown will show up better against the pale, semi-transparent background of the header when scrolling.
    2. How do I ensure the menu items to stay in the same position (to the right) on scrolling? The menu appears to jump to the middle of the header on scrolling, especially on page (as opposed to the home page).
    3. How to I adjust the active page menu colour? When I’m on a page e.g. Menu, that page’s title appears in black in the menu. I would prefer it was cream and bold.
    4. How to I remove the hover effect from the menu items? Currently when I hover over the menu items they change to white.

    Hope you can help ??

Viewing 8 replies - 1 through 8 (of 8 total)

  • 1.

    .sticky-enabled .navbar .nav > li > a {
    color: #795227;
}

    2. Still working on this

    3.

    .navbar .nav > li.current-menu-ancestor > a, .navbar .nav > li.current-menu-item > a {
    color: #f7dcb4;
    font-weight: bold;
}

    4.

    .navbar .nav > li > a:hover, .sticky-enabled .navbar .nav > li > a:hover {
    color: #795227;
}

    2. Go to Customize>Header>Navigation and select Menu on right

    Thread Starter mgnolan

    (@mgnolan)

    @rdellconsulting Thank you! Very much appreciated ??

    They all worked fantastically except number 2. The Navigation is already set to Menu on right but it still bounces on scrolling?

    Thread Starter mgnolan

    (@mgnolan)

    Oops! I spoke too soon – couple of teething problems with the proposed fixes:

    The current page menu item remains bold and cream on scrolling (so not so easy to see).

    Still haven’t managed to switch off the hover effect on the menu items, especially noticeable when scrolling.

    Hmm.

    The main menu has a <span3>Logo + <span9>Menu. The sticky menu has only a <span9>Menu which causes the displacement. Did you switch Logo off in Sticky Header? Can you try it with the shrink title/logo checked. Would this work for you?

    Hover, try:

    /*Menu Hover Effect*/
.navbar .nav > li > a:hover, .sticky-enabled .navbar .nav > li > a:hover,
.navbar .nav > li > a:first-letter:hover, .sticky-enabled .navbar .nav > li > a:first-letter:hover {
    color: #795227;
}

    and remove this:

    /* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
color:          #ffffff;
text-shadow:    none;
}

    Thread Starter mgnolan

    (@mgnolan)

    That explains the displacement! Thank you.

    Yes, I had the logo switched off in sticky header. I tried it with shrink logo in sticky header mode but the logo was too small. I’m now working with keeping the sticky header with the full size logo. Now I need to figure out how to keep the header colour brown on scrolling….

    The snippet you suggested doesn’t seem to work ??

    I’ve started from scratch again with my custom CSS (I was beginning to wonder whether some of my customisations were conflicting with one another).

    I’m still stuck trying to change the footer background colour too. I’ve found snippets in the forum based on the footer#footer id but theses do not seem to have any effect. I’m stumped!

    I think we may have just clashed? I’ve been setting up a Child Theme style sheet for you, but the theme has changed?

    So can you make Czr the theme again, remove all your custom css and setup a child theme using this as the starter code.

    I’ll check again tomorrow and complete it.

    Thread Starter mgnolan

    (@mgnolan)

    Yep, I’ve been trying another theme to see if I could get the look I was trying to achieve without the issues I’ve experienced.

    I’ve switched it back to a Customizr child theme (created using the one-click child theme plugin) now and have deleted all Custom CSS except the snippet to change to text colour to brown (keeping the background white circumvents many of the issues I’ve been experiencing but its not a real solution if I want a brown background!)

    Thanks for responding. Hopefully we’ll get to the bottom of the various issues. ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Managing Main Menu Text Colours’ is closed to new replies.