Top Navigation Colour Change

  • Resolved titusraj

    (@titusraj)


    7 years, 12 months ago

    Dear Sir / Madam,

    I have managed to change most of the black to various shades of blue using the CSS below.

    However I cannot figure how to change the Top Menu, background color when my pointer is on the sub menu, I still get a black background, I would like to change this menu colour too.

    The black is more visible on all the main menu items on mobile view.

    Many Thanks for your help.

    Titus

    #top-menu li a:hover {
    background: skyblue !important;
    }
    ul.sub-menu {
    background: #64c4ea !important;
    }

    .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a {
    background: skyblue !important;
    }

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    7 years, 11 months ago

    Hi, I looked at your site, and we can use a media query to change the background color to your blue at 959px and narrower, which is when the touch device/mobile menu becomes active with the following custom CSS. Go to Appearance > Customize > Additional CSS and add the following.

    @media screen and (max-width: 959px) {
.main-navigation ul {
	background-color: #64c4ea;
}
}
    Thread Starter titusraj

    (@titusraj)

    7 years, 11 months ago

    Thank you Sir, that worked, happy now.

    I have a black border at the bottom of mobile view, like to remove that if possible

    I still have the black background still appearing for the main menu while I scroll to the sub menu, this is on desktop.

    Titus

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    7 years, 11 months ago

    For that black line, add this to that media query.

    .header-top {
    background-color: #64c8ed !important;
}
    Thread Starter titusraj

    (@titusraj)

    7 years, 11 months ago

    Unfortunately that did not give the desired effect . I tried header-bottom too.

    I still have a black border at the bottom of the navigation menu on mobile view. I can live with it, but will be nice to change it if possible 🙂

    Thread Starter titusraj

    (@titusraj)

    7 years, 11 months ago

    Solved this issue by adding some Text to Header Top Text 1 Widget.

    Thanks for your help

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    7 years, 11 months ago

    You are welcome.

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

The topic ‘Top Navigation Colour Change’ is closed to new replies.