Mobile button disappeared

Support
#1

I don’t know what happened, but I was reviewing the home page, and at a point, I changed the background color for a test, and the button for the mobile (it was violet) disappeared. I know it’s probably in white, so invisible, and I can guess where it is and click on it, but not my readers…
I tried to go to the theme’s CSS and change the color, but it didn’t change it. I also wanted to make it slightly smaller, but nothing works. Can you help?

The website is www.cleliamattana.com. I have the child theme PRO. All the plugins and themes /WordPress are updated.

I also have other minor Issues but will open another ticket because this is way more important. Thanks

#2

Hello @klelietta,

Thanks for writing in! You are correct that the mobile menu icon is in white which is why it is not visible to the eye. Since you have added this custom CSS;

.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 50px;
}

Just update it and add color: violet; to it. Therefore, your final code will be:

.x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 50px;
    color: violet;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

#3

Thanks
I didn’t see the code before, so I added it, but I also noticed that the button is huge and not centered. Anything I can do? Either I make it smaller (edit, I managed to make it smaller) and either on the right side of the logo or below it in the middle. I tried everything to no avail.

Thanks for your help!

#4

Hello @klelietta,

The maximum width of your logo image is wide enough for smaller screens. Kindly reduced it to at least 450 or 500 pixels and see the results in your mobile phone.

Screen Shot 2022-08-01 at 10.17.08 AM
Screen Shot 2022-08-01 at 10.17.08 AM632×688 41.6 KB

Hope this helps.

#5

sorry, I don’t understand, I meant the hamburger menu, I’d like to have it centered underneath the logo on mobile. If I reduce the logo I can barely see the writing…

#6

Hello @klelietta,

Because your Logo image is too wide, there isn’t enough space to display the mobile menu on the right side. This is why it has moved to the next line.

Screen Shot 2022-08-01 at 12.49.34 PM
Screen Shot 2022-08-01 at 12.49.34 PM552×896 83.6 KB

If you reduce the logo image width, you would have something like this:

Screen Shot 2022-08-01 at 12.50.14 PM
Screen Shot 2022-08-01 at 12.50.14 PM550×820 80.4 KB

Hope this makes sense.

#7

yes it does, I tried last night, the logo is not the prettiest like that tough. Is there a way at all to move the menu in the middle and down the logo? thank you!

#8

Hey @klelietta,

You can move the menu to the center and push the logo down. Since you are using Pro, you can use the header builder to restructure your header layout. Please check these articles.

Hope that helps.

#9

Hi
Is there a way to avoid using the builder? I need to keep the site as simple as possible… just using CSS is not possible? Thanks!

#10

Hello @klelietta,

In case you don’t want to use the Header builder then you need to use custom CSS code in the media query. I would suggest you add this custom CSS code to move the menu under the logo for small devices only.

@media(max-width:767.98px){
.masthead-inline .x-btn-navbar {
float: none;
width: 100%;
text-align: center;
}
a.x-brand.img img {
width: auto;
}
a.x-brand.img {
float: none;
width: 100%;
display: block;
text-align: center;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

#11

Thank you very much it worked! I do know a bit about CSS, but whatever i tried it didn’t work. I was able to remove the underscore from the button and change the size at least.

Thanks again!

#12

Hello @klelietta,

Glad that we were able to help you, please feel free to open a new thread if you have any more concerns.

Thanks

#13

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