[createmotiveParticipant]

Hi –

I would like to center stack the logo and hamburger header elements on mobile and keep the desktop version inline as is.

The url is here: cr-nativenations.com

I’ve attached two images. One is a screen shot of mobile as is, one is a photoshoped example of what I’d like to see: the logo and hamburger relationships adjusted in mobile view, the menu itself intact as is.

Thanks for your help,

Daniel

[createmotiveParticipant]

Sorry –

Missed the proper attachments. Both are attached here.

[JadeModerator]

Hi Daniel,

Please add this code in the customizer:

@media (max-width: 980px) {
    .x-brand {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .x-navbar-inner {
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        float: none;
        display: block;
    }
}

Hope this helps.

[createmotiveParticipant]

Code did a great job of shifting the logo and hamburger into proper alignment but it moved the menu to a centered display as well.

(screen shot working rv1 attached)

Is there an adjustment we can make to have it display with the menu as in the example

(example attached)

If it helps, gethopenow.org has a mobile solution that has the exposed menu un-centered with the logo and hamburger stacked.

Thanks,

Daniel

[createmotiveParticipant]

To clarify, I would like the exposed menu (after hamburger click) to be left justified and aligned as it was prior to these edits.

Thanks for all your help! You guys are awesome!

[JadeModerator]

Hi Daniel,

Please update the code to:

@media (max-width: 980px) {
    .x-brand {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .x-navbar-inner {
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        float: none;
        display: block;
    }

    .x-navbar .mobile .x-nav li > a {
        text-align: left;
    }
}

Hope this helps.

[createmotiveParticipant]

Thanks – like a charm.

[JadeModerator]

You’re welcome!

[Author]

Posts