Navigation menu item alignment on mobile

Support
#1

Hi, I’m trying to figure out how to maintain the same look and feel of my menu when viewed on mobile.

Website: naplesinsurancegroup.com

Desktop screenshot:

Mobile screenshot:

#2

Hello @rmcgroup,

Thanks for asking. :slight_smile:

Please try adding following CSS and let us know how it goes:

.e544-24.x-modal .x-modal-content{padding: 0;}

.e544-24.x-modal .x-modal-content-inner {
        padding-left: 1em !important;
    }

Thanks.

#3

I added that code and nothing changed. Any other ideas?

Thank you.

#4

Hi again,

Please use the following code instead:

.e544-24.x-modal .x-modal-content { 
    padding: 0 !important; 
}

.e544-24.x-modal .x-modal-content-inner {
    padding: 0 !important;
}

.e544-24.x-modal .x-menu, .e544-24.x-modal .x-menu li {
    text-align: center !important;
}

Add the above code in your Child Theme’s style.css file instead. Let us know how this goes!

#5

It took a minute, but it finally kicked in and is centered on mobile, thank you!. Now, HOW do I change the text size of the navigation items for mobile only, without affecting the desktop version?

#6

Hello @rmcgroup,

Thanks for updating the thread. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS to change text size:

@media only screen and (max-width: 600px) {
.e544-24.x-menu .x-anchor {
    font-size: 0.6em;
}
}

Thanks.

#7

That didn’t seem to help. Additionally, for some reason the instructions before to center the words on mobile completely stopped working before I added your custom CSS. I’m not sure what’s happening but we’ve gone backwards somehow :slight_smile: What do you think could be another solution?

Thanks.

#8

Hi again,

Please replace all previously given code with the following code:

.x-modal .x-modal-content { 
    padding: 0 !important; 
}

.x-modal .x-modal-content-inner {
    padding: 0 !important;
}

.x-modal .x-menu, .x-modal .x-menu li {
    text-align: center !important;
}

@media screen and (max-width: 767px) {
    .x-modal .x-anchor-text-primary {
        font-size: 16px !important;
    }
}

Let us know how this goes!

#9

It’s looking good now! Thank you

#10

You’re most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.