Docs

[Benjamin H]

As you can see in the attached picture, the nav button is beneath the logo on the mobile display. I would like to move it to the right side of the logo for the mobile views. Website is http://www.ntbcnj.org

Thanks!
Benjamin

[John Ezra]

Hi there,

Thanks for writing in! This isn’t a feature offered with X out of the box. We can try CSS but it may not be perfect. Thanks for understanding.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:979px) {
    .x-logobar-inner {
        width: 90%;
    }

    .x-navbar-inner {
        width: 20%;
        float: right;
        clear:  none;
        margin-top: -14%;
    }
}

@media (max-width:767px) {
    .x-navbar-inner {
        margin-top: -16%;
    }
}

@media (max-width:480px) {
    .x-navbar-inner {
        margin-top: -18%;
    }
}

Hope this helps – thanks!

[Benjamin H]

ok!
It did move it to the side like I wanted, but as you can see with this picture, the menu bar when tapped looks messy

Also, how would I make that button a little larger. Thank you!

[Joao]

Hi Benjamin,

Please try using this code instead:

@media (max-width: 979px){
    .x-logobar {
        text-align: left;
    }
    .x-btn-navbar {
        float: right;
        margin-top: -60px;
    }
}

To adjust the size of your button, go to Appereance / Customizer / Header and scroll all the way down, over there you will find the options for size and alignment.

Hope that helps,

Joao

[Benjamin H]

I think we are getting closer, but for some reason right now the menu isn’t dropping down at all. I think I may have deleted something that should have stayed, but I don’t know what that could have been

My current custom code is

media (max-width: 979px){
    .x-logobar {
        text-align: left;
    }
    .x-btn-navbar {
        float: right;
        margin-top: -60px;
    }
}
.x-feature-box-title {
  font-size: 2.3em;
}
.x-navbar .x-icon {
    font-size:20px;
}
.x-navbar .x-icon {
    right: 7px !important;
    position: relative;
}
.x-nav [data-x-icon],
.x-nav [class*="x-icon"] {
    font-size: 2.2em;
}
.x-navbar .x-icon {
    bottom: 7px !important;
    position: relative;
}
.x-nav #menu-item-8 a {
	padding-bottom: 30px;
}
.x-navbar .x-icon {
  padding: 5px;
}
.x-navbar .x-icon {
  bottom: 7px !important;
}
.x-navbar .desktop .x-nav > li > a {
  padding-top: 15px;
}

Also, as you see on the logo, the button is on top of the logo, I don’t know how to resize it on mobile so that the button isn’t on top

3. On mobile, you notice there is a large white bar beneath the dropdown button and logo

Thank you!
Benjamin

[Rue Nel]

Hello There,

Please update the css code and use this instead:

@media(max-width: 979px){
  .x-logobar {
    text-align: left;
  }
  
  .x-btn-navbar {
     float: right;
     margin-top: -60px;
  }

  .x-logobar .x-container.max.width {
    width: 100%;
    max-width: 70%;
    margin-left: 10px;
  }

  .x-navbar-inner {
      min-height: 0;
  }
}

It should look like this:

And since you have installed a caching plugin WP Fastest Cache and Autoptimize, please keep in mind that after doing every updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[Benjamin H]

Hi, we added the CSS, but the dropdown menu still is not working. I will post the log in details in a private message below so that you can log in and take a look. Thanks!

[Benjamin H]

This reply has been marked as private.

[Joao]

Hi There,

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time. I would start by Autoptmize.

The credentials you gave don´t help much because they are too limited and we are unable to check any areas of your dashboard.

Thanks,

Joao

[Benjamin H]

Sorry about that – I changed the login to enable you to view/edit all of it now!

[Rue Nel]

Hello There,

After further investigation, it appears that you have inserted an invalid code <div class="hexagon"></div> in the custom JS script section in the customizer. This is the reason why your mobile menu is not working because it disrupts the JS codes. I have removed it and now it is already working. I would also recommend that you activate again Autoptimize plugin because I temporarily disabled it.

If you need anything else we can help you with, don’t hesitate to open another thread.

[Benjamin H]

Thanks so much for the help!

[Joao]

You are welcome Benjamin.

Contact us if you need help with anything else.

Thanks

Joao

[Author]

Posts