Removing the drop down nav bar for mobile and tablet
Hi, I'm working on a landing page using Atlas template. I want to remove the drop down nav bar for both mobile and tablet. Any suggestion on how to do this?
For Better support please provide any preview link or you can try this below snippet to remove navbar For Removing Menu items in mobile and tablet view @media(max-width:1024px){ .kl-navbar__menu { display: none; } }
For Removing menu child item along with arrow in mobile and tablet view @media(max-width:1024px){ .kl-navbar-submenu-wrapper { display: none; } .kl-navbar__parent>a:after{ display:none } }
Hope this helps! If we were able to answer your query, kindly help the community by marking it as a solution. Thanks and Regards.
Removing the drop down nav bar for mobile and tablet
@ImeldaH I would suggest following @Chris-M advice. With CSS you can easily achieve what you need.
In case it is of any help, here's some extra information about device sizes that you can use as reference:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Here you can find more information about CSS media Queries if you are not familiar with this concept.
do you have a preview page / live page, where we can see the drop down nav bar, this will help us a lot to assist you further. We can remove / hide the bar for you on the mobile - and on the tablet breakpoints via CSS commands.