Docs

[rlmills3rd]

Hello,

In order to have the stacked header style on desktop and the inline header style on mobile I inserted the following custom CSS code:

@media (max-width:979px){

/* Changes top navbar from desktop (Stacked) to mobile (inline) */

  .masthead-stacked .x-brand {
        float: left;
}
  .masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -165px;
  }

 .masthead.masthead-stacked .x-navbar-wrap {
        float:right;
        margin-right: 20px;
        margin-top:14px;
    }
		}

But now my mobile menu is broken and not reaching entirely across the width of the screen. Any ideas on how to fix this?

[rlmills3rd]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

  .masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -165px;
  }

To :

  .masthead-stacked .x-btn-navbar {
    display: inline;
  }

Hope it helps.

[rlmills3rd]

Hey thanks for the reply. Unfortunately, this did not work. The nav button is now below the top bar and the menu is still not full width.

Any other ideas?

[Rad]

Hi there,

Would you mind sharing your site’s URL?

Thanks!

[rlmills3rd]

I’m building on a locally hosted server. Is there any other additional info I might be able to provide you?

[Christopher]

Hi there,

Please upload your site in a staging domain as we need to check your site.

Thanks.

[rlmills3rd]

Hi there,

So i did some more research through the forum and was able to come up with a code that works!

See below:

@media (max-width: 979px) {

.x-navbar-inner {
    min-height: 0px;
}
.masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -55px;
}
}

@media (max-width: 979px){
    .masthead-stacked .x-brand {
        float: left;
    }
    .masthead-stacked .x-btn-navbar {
        margin-top: 0;
        top: -95px;
    }
}

My question now would be what code to add to shrink down the size of the logo?

[Rupok]

Hi there,

Thanks for writing back. You can try adding this :

@media only screen and (max-width: 480px) {
.x-brand {
    max-width: 200px;
}
}

You might need to adjust the max-width and you can change the media query as well.

Cheers!

[rlmills3rd]

That worked!

Thanks a million!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts