Nav menu / search and cart icons - CSS problem

Shopify Partner
7 0 0

Hi there

 

Having a basic CSS problem, i'm not a CSS designer so finding this difficult to get right.

 

I want to keep the Search and Cart icons visible on mobile and table and not hide as they currently do.

 

Here's the site Rock Photographers Collective uses a theme called Vela.

 

In vela-menu.liquid

 

I can see that it's this line that controls how the navigation hides on smaller devices

 

<ul class="nav hidden-xs hidden-sm">

 

So I want to stop the following being included in the hidden-xs and hidden-sm.

 

nav2.JPG

 

I've tried a few things, e.g. moving the above out of the <ul> tag and that fixed the hiding but then it messes up the positioning of the icons.

 

 

Advice greatly received. Thanks in advance!

 

 

0 Likes
Navigator
357 39 40

hi, we need to add multiple CSS to get it working as per you need, so add following CSS to end of your master.scss file

 

@media (max-width: 767px){

#velaMegamenu .nav{displayinitial !important;}

 

#velaMegamenu .nav li{displaynone;}

}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
1 Like
Shopify Partner
7 0 0
Thank you I'll try that :-)
0 Likes
Navigator
357 39 40
sure, and if it works then you are welcome to donate any amount of your
choice, it works as an encouragement and support. Also please mark my
answer as solution.
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Partner
7 0 0

That didn't work for me.

0 Likes
Navigator
357 39 40
must be something wrong in copying code, can you add me to shopify? I will
do it
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Partner
7 0 0

Sorry just realised it does work on mobile, it still hides on tablet but I think I should be able to have a go at fixing that. Thank you.

0 Likes