Forums

Need Mobile Nav for 1024px and under

Permalink
There are a lot of moving parts with LESS it seems, and I can't quite figure out how to trigger the Mobile Nav for screen sizes 1024px and under. It works great once you get into the 768px range and below, but I need it to trigger at 1024px.

What do I need to change and where?
barkingtuna
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi barkingtuna,

What theme are you using and what is the link to your website?
barkingtuna replied on at Permalink Reply
barkingtuna
heavily customized Elemental...http://www.azstorage.com
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
You could give this a try.

nav logo:
<div class="col-md-3 col-sm-6 col-xs-6">

nav links:
<div class="col-md-9 col-sm-12 col-xs-6">

comment out:
@media (max-width: 900px) and (min-width: 768px) {
   div.ccm-page header nav ul li a {
      /*font-size: 1em;*/
   }
}

Also, I would look into the fixed call to action bar.
- at under 1199px wide, it disappears
- it reappears at under 767px
- at 767px, the call to action bar is partially visible, and covers your nav menu
barkingtuna replied on at Permalink Reply
barkingtuna
Thanks... I'll give it a shot. Not sure if he'll want the Navigation to drop down like that, but it's a viable solution nonetheless. I noticed the Call to Action the other day. I believe I've fixed it now. The 50px top margin was throwing me off, as it appears when I use developers tools in Chrome and/or resize the browser window after loading the page. However, if the page is loaded in a fixed width window, like from a mobile device or iPad, the top margin is gone.