[Resolved] Responsive navigation

[Hassan]

Hi,
I had used CSS to create margin-top for the navigation on big screens like this screenshot:
https://drive.google.com/open?id=1NNECNccTFnBVkcj4mkAoDFZhz0VUe7vg

But on sticky I don’t want to be any margin, so I wrote this code to remove it on sticky and becomes full-width

 .navigation-clone {  
	max-width: 100% !important;
        left: auto !important;
	margin: 0px !important;
}

and it works perfectly, but the problem is that the margin still on mobile screens like this screenshot:
https://drive.google.com/open?id=1RtWxqJxv889bVaeimU47em_ysOk0J6_7

Now my question is how to remove this margin only on mobile whether on sticky or not ?
I used @media but didn’t work.

You can check my website link to see the problem.

Thanks in advanced.

[David]

Hi there,
the .main-navigation class is used on the desktop and mobile nav. Instead of .main-navigation use #site-navigation this is specific to the desktop nav.

[Hassan]

Thank you David,

It was a great advice, it works now.

—
Kind Regards,

[David]

Glad to be of help.

[Author]

Posts