Brine Template, Mobile Style Pop Out Menu

Site URL: https://alyraymertest.squarespace.com/

Hi there,

I have two questions I am hoping you can help me with:

1. I'd like for my mobile nav to be on the right side instead of the left
2. I'd like the text in the mobile menu to change color upon hover

I am using the following code:

//mobile menu on desktop adjustments//
@media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}}

.Mobile-overlay {width:60%; background-color:#FFF}

//mobile menu on desktop adjustments//
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} 
.Mobile-overlay-menu {width: 100%; z-index: 1;}

//custom font mobile menu//
body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item {
    font-family: 'agharti-condensed-black'!important;
      font-size: 60px;
      letter-spacing:.07em;
      line-height: 1em;
       text-transform: uppercase 
      
}

Thank you in advance! 🙂

Site: https://alyraymertest.squarespace.com/, PW: aly7654

On 11/12/2021 at 11:15 PM, AlyRaymer said:

Site URL: https://alyraymertest.squarespace.com/

Hi there,

I have two questions I am hoping you can help me with:

1. I'd like for my mobile nav to be on the right side instead of the left
2. I'd like the text in the mobile menu to change color upon hover

I am using the following code:

//mobile menu on desktop adjustments//
@media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}}

.Mobile-overlay {width:60%; background-color:#FFF}

//mobile menu on desktop adjustments//
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} 
.Mobile-overlay-menu {width: 100%; z-index: 1;}

//custom font mobile menu//
body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item {
    font-family: 'agharti-condensed-black'!important;
      font-size: 60px;
      letter-spacing:.07em;
      line-height: 1em;
       text-transform: uppercase 
      
}

 

Thank you in advance! 🙂

Site: https://alyraymertest.squarespace.com/, PW: aly7654

Hi 

You can try adding to Home > Design > Custom Css

.is-mobile-overlay-active .Mobile-overlay {
  right: 0;
  left: unset;
}

.Mobile-overlay-nav.Mobile-overlay-nav--primary  a:hover {
  color: purple;
  transition: color 0.5s linear;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

On 11/14/2021 at 5:11 AM, bangank36 said:

Hi 

You can try adding to Home > Design > Custom Css

.is-mobile-overlay-active .Mobile-overlay {
  right: 0;
  left: unset;
}

.Mobile-overlay-nav.Mobile-overlay-nav--primary  a:hover {
  color: purple;
  transition: color 0.5s linear;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you! That works, testing here: 

Site: https://alyraymertest.squarespace.com/, PW: aly7654

Now that it's tested, is there a way to clean up and simplify this CSS? Or is it better to keep all of it?

//mobile menu on desktop adjustments//
@media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}}

.Mobile-overlay {width:60%; background-color:#FFF}

//mobile menu center text//
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} 
.Mobile-overlay-menu {width: 100%; z-index: 1;}

//custom font mobile menu//
body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item {
    font-family: 'agharti-condensed-black'!important;
      font-size: 60px;
      letter-spacing:.07em;
      line-height: 1em;
       text-transform: uppercase 
      
}
//mobile menu right side//
.is-mobile-overlay-active .Mobile-overlay {
  right: 0;
  left: unset;
}

//menu text to purple/
.Mobile-overlay-nav.Mobile-overlay-nav--primary  a:hover {
  color: #5834e7;
  transition: color 0.3s linear;
}
 

On 11/15/2021 at 9:39 PM, AlyRaymer said:

Thank you! That works, testing here: 

Site: https://alyraymertest.squarespace.com/, PW: aly7654

Now that it's tested, is there a way to clean up and simplify this CSS? Or is it better to keep all of it?

 

//mobile menu on desktop adjustments//
@media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}}

.Mobile-overlay {width:60%; background-color:#FFF}

//mobile menu center text//
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} 
.Mobile-overlay-menu {width: 100%; z-index: 1;}

//custom font mobile menu//
body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item {
    font-family: 'agharti-condensed-black'!important;
      font-size: 60px;
      letter-spacing:.07em;
      line-height: 1em;
       text-transform: uppercase 
      
}
//mobile menu right side//
.is-mobile-overlay-active .Mobile-overlay {
  right: 0;
  left: unset;
}

//menu text to purple/
.Mobile-overlay-nav.Mobile-overlay-nav--primary  a:hover {
  color: #5834e7;
  transition: color 0.3s linear;
}
 

You should keep it, no need to shorter it.