Header Menu Issues - How to remove a section for ipad

Store Design
1

Hello,

I am having some formatting issues with my header menu, I need the ‘refer a friend’ tab on the header to be removed when the user is on an ipad or tablet.

Please refer to the attached image for reference

shop link: french-bazaare.myshopify.com

Let me know if there is an easy way to fix this!

Thanks

MM

Screen Shot 2021-09-16 at 1.15.59 PM.png
Screen Shot 2021-09-16 at 1.15.59 PM.png1130×1490 214 KB

2

Hi,

Try adding this code to the bottom of style.scss.css

@media only screen and (min-width:769px) and (max-width:899px){
.refer-a-friend {
  display: none;
}  
}
3

Hi @mattpermute ,

Hope you are well.

Please follow the below steps:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss.css
  3. Paste the below code at the bottom of the file & Click Save
@media (max-width: 1024px) {
.refer-a-friend {
display:none!important;
}
}

Hope that helps

Thanks

4

Thank you this worked like a charm!

1 Like
5

@mattpermute I am glad the issue is solved.
P.S. great looking website!