Custom CSS Help

  • tyeglover

    (@tyeglover)


    1 year, 7 months ago

    I need help with CSS codes for my header. I have the below CSS to change the color of my menu dropdown but it only works on desktop not mobile. Additionally I want to use the same color in the search bar and mini cart. Thanks in advance!

    /* menu dropdown color */
.site-header-wrapper #site-header #primary-menu-wrapper ul.primary-menu>li.menu-item-has-children>ul.sub-menu, .site-header-wrapper #site-header #secondary-menu-wrapper ul.primary-menu>li.menu-item-has-children>ul.sub-menu {
	background-color: #cbbea1;
}

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Benjamin Zekavica

    (@benjamin_zekavica)

    1 year, 7 months ago

    Hallo @tyeglover, I hope this is helpful 🙂

    This is the CSS Code for mobile menu: 

    .site-header-wrapper #mobile-menu-wrapper {
   background-color: #cbbea1;
 }

    This is the CSS Code for the Search bar: 

    .site-header-wrapper #site-header #secondary-menu-wrapper ul#menu-site-tools>li#search-site-tool .search-wrapper {
  background-color: #cbbea1;
}

    This is the CSS Code for the Cart: 

    .header-minicart {
background-color: #cbbea1;
}
    Thread Starter tyeglover

    (@tyeglover)

    1 year, 7 months ago

    This worked! Thank you so much Benjamin!

    Maybe you can help me with this as well. I wrote the below code to change the background color of the search results but it’s not changing the bar at the bottom where it says “powered by jetpack”. I would also like to change the font color for the entire popup to #362624 but can’t figure out how.

    .jetpack-instant-search__overlay *
{background-color: #F6F3Eb;
}

.jetpack-instant-search__box input[type=search].jetpack-instant-search__box-input {background-color: #f6f3eb}
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Custom CSS Help’ is closed to new replies.