Different menu for mobile

Hello @hazy23,

Thank you for reaching out,

You can’t have different header types for different devices; all pre-defined header types for desktop in the theme are in Customizer > Header > General, and all pre-defined header types for Mobile and Tablet are in Customizer > Header > Mobile Menu.

In this case, you must create a custom header if you wish to use header styles that are not included in our pre-defined header types. Please follow the steps explained in this link: https://docs.oceanwp.org/article/355-how-to-create-a-custom-header.

I hope it helps.
Best Regards

Hi,

I’m not sure you understand correctly. I don’t want to use a custom header style. I just want to use the style ‘vertical’ for desktops and ‘minimal’ for mobiles. I thought you could have different designs per device.

Also I would like to do the following
– move the hamburger icon more to the right for the mobile view.
– move the logo and menu more to the right and have some more padding at the left for desktop view

Thanks,
Hazel

Hello @hazy23,

Thank you for reaching out,

As I mentioned earlier, unfortunately, the predefined headers are limited to showing on devices. A minimal header type for mobile is not available. The only headers available for the mobile are:
Dropdown
Fullscreen
Sidebar

You can check all header types for the desktop in the following path:
WP Dashboard > Appearance > Customizer > Header > General

And for all header types for the mobile devices:
WP Dashboard > Appearance > Customizer > Header > Mobile Menu

Regarding your new requests:

1. To change the position of the hamburger icon you can put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(max-width:960px) {
    body.default-breakpoint .oceanwp-mobile-menu-icon {
        display: block !important;
    }
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

2. Regarding the logo on the desktop, my suggestion is to remove the empty space around the logo; your current logo has empty space around the logo, and its effects, as a result, won’t align with other elements of the header
https://postimg.cc/DSW8ZdpG
https://postimg.cc/XGWJsMjK
https://hazelling.nl/wp-content/uploads/2024/05/cropped-logo-Hazel-Ling.jpg

Then you can change the position of the logo from the settings here: https://postimg.cc/06TmxH8r

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope it is helpful.
Best Regards

Hi,

Thanks for your response.
The code to move the hamburger to the right doesn’t work.
And there is little margin at the left side of the page. I would like to have the logo and menu moved up more to the right and have more padding on the left.
Also I have the following questions:
– I would like the menu collapse on click without seeing the plus
– how to change the background color or the second level of the menu and move it to the right with one position
– How to change the width of the menu and also move the menu closer to the image

Thanks,
Hazy

Hello @hazy23,

Thank you for reaching out,

1. The CSS is correct, here is the result: https://postimg.cc/zbR0B9sh – please ensure to clear all level caches and cookies and CDN end etc on your website.

2. Please share a screenshot from this: “And there is little margin at the left side of the page. I would like to have the logo and menu moved up more to the right and have more padding on the left.“: Sending screenshots or a short video will help us understand and check it better.

3. Regarding the “I would like the menu collapse on click without seeing the plus“: Generally all settings for the mobile menu are in WP Dashboard > Appearance > Customizer > Header > Mobile Menu. Open the settings, find the “Dropdown Target” option, and change its setting to “link.”

4. Regarding “how to change the background color or the second level of the menu and move it to the right with one position“: Scroll down to the Mobile Settings in the Customizer (the path I mentioned in number 3). At the end of these settings, you’ll find styling for the dropdown mobile menu.

5. Regarding the “How to change the width of the menu and also move the menu closer to the image“: All in all the mobile menu doesn’t included width option – it must be full width because the mobile devices have small screen to touch, it can be an accessibility too.

I hope it helps.
Best Regards