mobile How to style mobile header menu

Hello

 

Please tell me how I can make the mobile menu text and social media icons white.

 

 

Here is the CSS I have

 

 

 

// footer mobile text CC //
#block-a5c4358a96066af3d09a p3 {
   font-size: 8px !important;
}

.header-nav-item > a:after, .header-nav-folder-item > a:after {
  content:'';
  width: 0px;
  height: 0.5px;
  background: #dcb05e;
  display: block;
  transition: width .5s ease;
}

.header-nav-item > a, .header-nav-folder-item:hover {
  background: none !important;
}

.header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after {
  width: 100%;
}

.header-nav-folder-item:hover > a {
  color: #fff !important;
} 

.header-nav-folder-item > a {
  display: inline-block;
}

header#header.shrink {
  background: #545454 !important; 
}

html {
  scroll-behavior: smooth;
}

.anchor-link {
  scroll-margin: 100px;
}

#block-7718413e187d966061db p,
#block-7718413e187d966061db h1,
#block-7718413e187d966061db h2,
#block-7718413e187d966061db h3,
#block-7718413e187d966061db h4 {
  font-family: "mrleopold-pro";
  font-size: 60px;
  font-weight: 300;
  text-transform: none;
  display: block;
  transform: rotate(-5deg) !important;
  position: relative;
  letter-spacing: 0px;
  margin-bottom: -50px;
  color: #dcb05e;
}

#block-yui_3_17_2_1_1684181791417_30968 h1 {
 font-family: "montserrat-light";
 letter-spacing: 10px;
  font-size: 50px;
  line-height: 60px;
 text-align: center;
}

.sqs-block-button-element:hover {
  background-color: transparent; color: #dcb05e;
}

#item-65086da8b6a6db1a27cd6be0 {
    header#header {
        background: #545454 !important;
    }
}

a {
text-decoration: none !important;
}

// Pagination //
#itemPagination {
  height: 1px;
  background: #545454;
  padding: 30px,
}

// Pagination //
.item-pagination-link .item-pagination-icon svg {
    width: 15px;
}

// White Text Styling //
#block-75d7d4835a4cbd44ea00 p3,
#block-d84ae4ad787a7858d538 p3,
#block-3d549eea25d5265b7172 p3,
#block-2894b63ff303b1e7a6f0 p3,
#block-7a27eed4c5cf422f7b67 p3 {
  text-color: #fff !important;
  color: #fff !important;
}

// Gold Text Styling //
#block-28ba2f69218446a97fc9,
#block-b8706f612aa02edbf309,
#block-yui_3_17_2_1_1696502639044_37978{
  color: #dcb05e;
}

// Post-Submit Message Styling //
#block-yui_3_17_2_1_1690721030241_1530 {
  color: #fff;
  font-family: "mrleopold-pro";
  font-size: 40px;
  font-weight: 300;
  text-transform: none;
  display: block;
  transform: rotate(-0deg) !important;
  position: relative;
  letter-spacing: 0px;
  margin-top: 30px;
}

// Subscribe Box Post-Submit Message //
#block-yui_3_17_2_1_1690810303384_15454 {
  transform: rotate(0deg) !important;
  color: #fff;
  font-family: "mrleopold-pro";
  font-size: 40px;
  font-weight: 300;
  text-transform: none;
  display: block;
  position: relative;
  letter-spacing: 0px;
  margin-top: 30px;
}

// Remove Hyphens //
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}

// Taupe topo page sections borders //
section[data-section-id="6511e33f7b0d7d0f9d402277"] {
    margin-top: -80px !important;
    margin-bottom: -50px !important;
  background: transparent !important;
}

section[data-section-id="651eeeb8c592507e05c150c0"] {
    margin-top: -10px !important;
    margin-bottom: -20px !important;
  background: transparent !important;
    color: black !important;
}

  section[data-section-id="65115e6afeceba6ce11ec213"] {
    margin-top: -40px !important;
    margin-bottom: -80px !important;
      background: transparent !important;

}

section[data-section-id="651eebdc38b2be0913c2a2f3"] {
  color: none !important;
  background: none !important;
  margin-top: -40px !important;
  margin-bottom: -30px !important;
  background: transparent !important;
}

section[data-section-id="651eeadd79e9924edaab0b4c"]  {
    margin-top: -50px !important;
    margin-bottom: -50px !important;
    background: transparent !important;
    color: black !important;
}

.page-section.background-width--inset .section-border {
    background-color: transparent !important;
}

// Full width accordian  //
.sqs-block-accordion .accordion-item__description {
    max-width: 100% !important;
}

/* Disable follow click */
.Header-nav-folder-title[href="/follow"] {
    pointer-events: none;
}

/* remove mobile footer on desktop only */
@media screen and (min-width:780px) {
section[data-section-id="65267c1e8b76e01727e57b42"]  {
    display: none !important;
}
}

/* remove desktop footer on mobile only */
@media screen and (max-width:781px) {
section[data-section-id="64c027fc981c71221f52cec5"] {
    display: none;
}
}

.primary-button-style-outline .header-menu .header-menu-cta a.sqs-button-element--primary, .secondary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--secondary, .tertiary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--tertiary {
    color: #dcb05d;
    border-color: #dcb05d;
}

#block-yui_3_17_2_1_1690721030241_1530 {
    color: #dcb05d;
}

.primary-button-style-outline .header-menu .header-menu-cta a.sqs-button-element--primary:hover, .secondary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--secondary:hover, .tertiary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--tertiary:hover {
    background: #dcb05d;
}

.header-menu-nav-item a {
    font-size: 18px;
    color: #fffff !important;
}

.header-actions-action--social {
    display: none !important;
}

.header-actions-action--social svg {
  fill: white !important;
}

 

 

Less important than the above, but I also have a really nice animation effect on my desktop menu nav items but it is not copying across to mobile menu, is there a way to have it on there too?

 

.header-nav-item > a:after, .header-nav-folder-item > a:after {
  content:'';
  width: 0px;
  height: 0.5px;
  background: #dcb05e;
  display: block;
  transition: width .5s ease;
}

.header-nav-item > a, .header-nav-folder-item:hover {
  background: none !important;

Hi,

What is your site url?

I think I have sorted it https://www.lamaralighting.com/. Thank you. 

On 10/20/2023 at 4:18 PM, champagnecoffee said:

I think I have sorted it https://www.lamaralighting.com/. Thank you. 

You meant you solved style mobile header menu and no need help now?