Help Optimizing Mobile / Desktop

Hello,

Mobile
1. You are using the transparent header style, therefore, it happens. Try to add some padding in the elementor design to fix it.

2. The logo is too large. Try reducing it to fix the issue

3. Edit the home page > OceanWP settings > Header tab and select default if you have disabled it

Mobile and Desktop
1. Didn’t see the issue. Can you please share a screenshot of it?

Desktop Only
1. Can you please share a screenshot of this one also?

Hi!

1. I’ll have to come back to this one after I fix everything else.

2. When you say the logo is too large, you’re talking about the page title that I manually entered (now a different issue because of the change for #3) Check raleighrep.com/photo – it’s on the same line as the page title. Image here: https://imgur.com/a/6xfK9Iv

3. This activates the menu on mobile, but it also shows the header on desktop, which I don’t want. I’d like a big and centered page title for the home page, but I’m okay with the theme’s page titles for every other page on the site.
Screenshot here: https://imgur.com/a/O0nyByV – I want the green to stay and red to go away. Also see mobile issue: https://imgur.com/a/YmMfECy

Desktop
4 and 5. Something changed with mobile and they’re not on the same line anymore, however, it’s happening on desktop. See here: https://imgur.com/a/b0vIt3H

2. I mean site title. It happens due to the long site title. Try adding the below code to the Customize > Custom CSS section to fix it –

@media only screen and (max-width: 959px) {
body.default-breakpoint .oceanwp-mobile-menu-icon {
    position: absolute;
    right: 0;
}}

3. The red area is the part of the header. Disable header and it will remove the red area
4 & 5. Try to use minimal header style or create a custom header to design it as per your need. Currently, the site title is the part of the header, not topbar. You can use minimal header style and turn off the top bar. It will make the menu and site title inline.

2. This moved the mobile menu up well, thank you!

3. If I disable the header then I’ll lose the mobile menu…

4-5. If I disable the top bar then where would I put the menu?

Not addressed: How do I get the mobile menu of of my desktop page? See image: https://imgur.com/a/elFQj9Y

I don’t think it is possible with the default settings. You need to create a custom header template to achieve the layout as per your need.

You suggested disabling the top bar, but where would the menu display if not the top bar? I can’t find any other options for it’s location in the interface.

And I still don’t know how to get rid of this: https://imgur.com/a/elFQj9Y

It wasn’t there a few days ago before I started tinkering with headings, titles, and menus.

1. You can use a nav menu widget to display a menu in the top bar.
2. It is the full-screen header style. Go to customize > header > General and select a different header style to remove it.

1. Not needed.
2. This opened up a lot of options and I eventually figured out how I wanted it.

One last question: Is there a way to make the mobile menu STICK to the top of the screen so it’s visible even while looking at the bottom of the page?

Since you’re here, one more question unrelated: On mobile, the content is squeezed very tightly. How do I expand it more to the sides? The content background is spread correctly, but not the content itself.

You can use Ocean Stick Anything plugin to stick the section that you want. Can you share a screenshot of the second issue?

I’ll give it a shot, thanks!

Compression issue: https://imgur.com/a/ujDzbWR

The text and gallery are squeezed.

Try using the below code and check it works or not –

@media only screen and (max-width: 959px) {
.container, body.content-full-screen .elementor-section-wrap>.elementor-section.elementor-section-boxed>.elementor-container {
    max-width: 100%;
    padding: 0 !important;
}
}

It expanded it a bit, is there a way to toy with how wide it can go? I’d like it just a touch wider.

I didn’t understand it clearly. The above code will remove the padding and make the content area wider. Do you want to remove all the padding from content area?