Mobile main menu color changes

  • wgbrand · Member ·

    Hello Taras, I got so many questions again…

    1. I used this code to change the main nav background color to white but it only worked on desktop and not mobile: 

    .th-bg-primary-base{
  background-color:#ffffff;
}

    2. Then I also tried to edit mobile nav menu fonts to black – regular state vs. gold on hover state but it didn’t work…

    	/*mobile nav font edits*/
.mobile-navigation ul > li > a {
color: #000000;
}
	.mobile-navigation > ul:not(.social-list) a:hover{
  color:#ae8d40;
}
	
	.header-menu-button .has-icon .clean-button .th-uppercase .th-text-secondary-base .th-text-xxs a:hover{
  color:#ae8d40;
	}

		.mobile-navigation ul > li > a {
color: #000000;
}
	
	.header-search-button:hover,
.header-searchform input.field:focus,
.header-searchform .submit:hover{
  color:#ae8d40;
}
	
#toggle-sidebar .mobile-navigation ul li a {
  color: #000000;
}

    3. I tried to make the toggle sidebar background blue and it also didn’t work.

    /*make the sidebar mobile menu background blue*/
.admin-bar .toggle-sidebar .inner-panel {
top: 35px;
background-color: #3d4762;
}

    4. Is there a way to change the Menu + hamburger icon to gold on hover? it’s currently white

    5. Can I remove the search bar in the main menu?

    Could you help me figure out what I’m doing wrong? Thank you again!

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hello,

    “I used this code to change the main nav background color to white but it only worked on desktop and not mobile:”
    – Please add this custom CSS to change colors of the header section: 

    
.site-header {
  color: #333;
  background-color: #ffffff;
}

.site-header a{
  color: inherit;
}

    —

    “Then I also tried to edit mobile nav menu fonts to black – regular state vs. gold on hover state but it didn’t work…”
    – Please try this custom CSS:

    
#toggle-sidebar .mobile-navigation > ul:not(.social-list) a:hover {
    color: #ae8d40;
}

#toggle-sidebar .mobile-navigation ul > li > a {
  color: #000000;
}

    —

    “I tried to make the toggle sidebar background blue and it also didn’t work.”
    – Please try this custom CSS:

    
.toggle-sidebar {
  background-color: #3d4762;
}

    —

    “Is there a way to change the Menu + hamburger icon to gold on hover? it’s currently white”
    – Sure. Please use this custom CSS:

    
#masthead #menu-button:hover {
  color: #ae8d40;
}

    —

    “Can I remove the search bar in the main menu?”
    – Of course. Please add this custom CSS:

    
.header-search-button {
  display: none;
}

    Let me know if you have any additional questions.

    Kind regards,
    Taras

  • The topic ‘Mobile main menu color changes’ is closed to new replies.