CSS Customization: mobile navigation menu color

  • Resolved sagibinder

    (@sagibinder)


    5 years, 6 months ago

    Hi
    I would like to get help please, there are 2 things
    1. In the mobile veiew, When pressing one of the menu items, the background color is changing to “black”
    since the font color is black, i can’t see anything, I would like to change it to a different color such as Grey/
    Can you please help me with the coding of it?

    2. Again in the mobile view, In the other pages (not the homepage) the burger menu is white and the background is white so it’s invisible.

    What should be the code in the CSS view in order to change it to black same as the FrontPage in the mobile version

    By the way this is the CSS code that I already changed in the website 

    #page, .site-content-contain, #primary-search-wrapper .search-container, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float, .audioman-mejs-container.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .woocommerce-account .woocommerce-MyAccount-navigation

 a {
	background-color:#ffffff !important; 
}
.menu-inside-wrapper {
background: white;
}
#header-links {
  background: transparent!important;
}

.storefront-primary-navigation { background-color: transparent;

!important; }
.storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu{
    background-color:transparent;
}
#header .primary-navigation .toggle-mobile-menu{
color: transparent;
}
 .absolute-header .site-title a, .absolute-header .menu-toggle {
color: #000;
}
@media screen and (min-width: 75em)
.navigation-classic.absolute-header .main-navigation a {
color: #000;
}

.hm-nav-container {
	background-color: transparent;
}
p, h1, h2, h3, h4, h5, h6, .entry-title a, h1.entry-title, .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title, .main-navigation a {
color: #000000;
}

footer{ background-color: black; }

.tnp-widget {
color: white; !important;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • Vlad

    (@vladytimy)

    5 years, 6 months ago

    Hi!
    Can you provide a link to your website? That way we can help you better.

    Please note that the link will be public and will not be later removed.

    Thread Starter sagibinder

    (@sagibinder)

    5 years, 6 months ago

    https://rotemshaul.com/

    Vlad

    (@vladytimy)

    5 years, 6 months ago

    Add this to your Appearance > Customize > Additional CSS:

    
.main-navigation ul :hover > a,
.main-navigation ul .focus > a {
	background-color: #e2e2e2 !important;
}

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle.selected {
	color:#000000 !important;

}

    The first part deals with the background changing to black (now it’s grey) and the second part deals with the burger menu.

    Hope this helps!
    Kind regards,
    Vlad.

    Thread Starter sagibinder

    (@sagibinder)

    5 years, 6 months ago

    Thanks! it’s works 🙂

    Vlad

    (@vladytimy)

    5 years, 6 months ago

    Glad it works!

    If your question has been answered, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

    Kind regards,
    Vlad

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

The topic ‘CSS Customization: mobile navigation menu color’ is closed to new replies.