Mobile Nav not floating all the way right

Support
#1

Hi there,

I’m using this code to collapse the mobile nav:

@media ( max-width: 1300px ) {
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
display: block;
}
}

For some reason, the mobile nav button isn’t going to the far right of the screen. I can’t figure out what’s causing it. Any insights?

My site is: http://canaan.coraclemarketing.com/

Thanks.

#2

Hi there,

Were you able to get this sorted?

I checked your site and the mobile icon seems to be displaying to the right correctly now.

#3

Hi Jade,

It seems to work as long as the viewport is narrower than 767px. But between 768px and 1300px, it doesn’t go all the way to the right. It’s driving me nuts.

Thanks.

#4

Hi There,

Thanks for the update!
Please use this css and let us know how this goes.

You can add the css inside your media query.

@media ( max-width: 1300px ) {
.x-btn-navbar, .x-btn-navbar.collapsed {
   clear: right;
   margin-top: -35px;
}
}

Thanks

#5

That did the trick.Thanks!

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.