Home > Net >  How to have a separate navi on desktop vs mobile?
How to have a separate navi on desktop vs mobile?

Time:11-11

  1. I am using this template as a base for my portfolio, https://html5up.net/phantom

Currently, there is a hamburger navigation in both web and mobile. How can I make it so that hamburger menu only shows on mobile? I tried changing the @media screen and (max-width: 736px) { to 480 for the menu CSS but it doesn't change anything..?

  1. Also is there a way to change the pink hover of the menu?

CodePudding user response:

Simple solution, but kinda works.

  • Set burger menu to display: block;
  • then have @media only screen and (min-width: width that you want) and inside you set burger menu to display: none; That means that from the width you set in the media queries it won't display the menu.

Hover you can simply change easy. Just find in the code where the :hover has the property color:; set to pink - and in your code override it with targeting the element and adding :hover and then adding the color you want it to be.

CodePudding user response:

/*use*/
@media only screen and (max-width: 736px){

      /*then put the hamburger class here*/



}
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  •  Tags:  
  • css
  • Related