NavBar Button Styling on Mobile

[brettfish]

Hi - I need some help with styling on a CTA button I have in the navbar. On the desktop every looks/works fine. On the mobile I need some styling help - essentially I want the button to replace the whole area the current “white box” takes up:

1. . Button has the white “box” around it like the other plain-text menu items, and I’d like to remove it for the button menu item only

2. . I’d like the button to be left-justified to align with the other links essentially left align with where the other links’ boxes are. I’d also like the vertical spacing to match the spacing between the boxes of the other links

3. I’d like to display the button full-width in the mobile menu - essentially so it takes up the exact same area that the current white box does (but with the white box removed)

URL: [details=Summary]http://stephmackris.com[/details]

Thanks!

[ruenel]

Hello @brettfish,

Thanks for writing in!

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-nav-wrap.mobile .x-nav > li.menu-item-163 > a {
    border: none;
    padding-left: 0;
    padding-right: 0;
    margin-top: 20px;
}

.x-nav-wrap.mobile .x-nav > li.menu-item-163 > a span,
.x-nav-wrap.mobile #navbtn {
    width: 100%;
}

Hope this helps.

[brettfish]

Brilliant! Thank you!

[christian]

You’re welcome, @brettfish.