Menu issue and button on menu

[seanlincoln]

Hi,
Please see the website i’m working with…
http://astraframe.co.uk/astra/

this is the previous thread I had support from

Create a button on header

I’m having an issue with button on different size monitors etc

first i don’t want the menu to go below the logo, instead it should change straight to the hamburger icon.

second when i open the menu the text in the button is no longer aligned correctly.

any help would be excellent!

cheers
Sean

[Alaa]

Hi Sean,

I’ve checked your website and I can see that the mobile menu isn’t working, the reason could be that you are using an old version of Cornerstone plugin with a recent version of X theme, please follow this guide to update the plugin to the latest version:

How to Update | Themeco Docs

After making sure everything is up to date, please report back to us so we can investigate the mobile menu issue.

Thanks.

[seanlincoln]

Hi,
Thanks for the reply, the issue was happening before there was an update available,
in any case i have updated cornerstone now and its still with the same issue.

regards
sean

[paul.r]

Hi Sean,

To fix all these issues, you can add the code below in Theme Options > CSS

/* Make mobile button appear earlier */
@media (max-width: 1250px) {
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.desktop {
    display: none;
}

.x-nav-wrap.mobile {
    display: block;
}

.x-nav-wrap.mobile.x-collapsed {
    display: none;
}

/* fix menu button alignment in mobile */
.x-navbar .x-nav>li.menu-item-291 a {
    margin-top: 1em;
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
}

Hope that helps.

[seanlincoln]

Hi,
Thanks for the reply, that has fixed the issue with the top menu going straight into mobile so thanks for that.

i am still having an issue with the custom button on the menu itself though.

it appears to work fine when i reduce the screen size down to minimum, however when the screen size is small enough for mobile, but not the min, the text in the button doesn’t align correctly.

see attached image

thanks for your help
sean

[jade]

Hi Sean,

Please try this code:

.x-navbar .mobile .x-nav>li:last-child a {
    max-height: none;
    text-align: center;
}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.