[Support request] Custom header design

[Dev]

Hello,

I want to create a custom menu design, like the one in the screenshot below.

https://prnt.sc/7SyGRCpo5jVE

Please let me know how I can create it.

[David]

Hi there,

there will be some custom CSS, but first:

1. Customiser > Site Identity and set your logo to display.
2. Customiser > Layout > Primary Navigation:
a) set the Location to Below Header
b) set the Alignment to center

Once you have that setup share a link to your site and ill provide the CSS

[Dev]

Hello,

I did what you said and after that my desktop menu is fine. But mobile menu becomes like this: https://prnt.sc/oIwApjAujlJ2

And I want that my mobile menu should look like this: https://prnt.sc/fuWDMXDVNLGm

Please let me know.

[David]

Enable the Mobile Header in Customiser > Layout > Header

[Dev]

Okay, I did what you said after that my logo is not coming in the mobile menu please see this, https://prnt.sc/EAXPQeI6P3AT

[David]

When you enabled the Mobile Header it provides you a field to add the Logo for the Mobile Header

[Dev]

Hello,

Okay, the logo is coming now.

But the size of the logo is too small, how I can make it big, the logo size.

https://prnt.sc/zSR_sDr82y05

[David]

You can add this CSS:

#mobile-header .mobile-header-logo img {
    height: 70px;
}

adjust the height to suit.

[Dev]

Thanks, it worked perfectly. 🙂

[David]

Glad to hear that

[Dev]

Hello,

I have done the below settings, as you said me earlier.

1. Customiser > Site Identity and set your logo to display.
2. Customiser > Layout > Primary Navigation:
a) set the Location to Below Header
b) set the Alignment to center

Now can you please tell me how can I achieve the design like the below header that you are seeing in the screenshot.

https://prnt.sc/7SyGRCpo5jVE

Please let me know

[David]

Can you share a URL to the site ?

[Dev]

Hello,

Here is the site: https://www.diveshtechanalysis.com/blog/

[David]

Add this CSS to put the border on the top of the nav:

.main-navigation .inside-navigation {
    border-top: 1px solid #ccc;
}

Then you need to edit the Customizer > Colors for the Primary Navigation

[Dev]

Hello,

Please see the below image

https://prnt.sc/egYVAPsU2MiU

In the mobile view, the divider/border line is going over the top of the logo. I want that in mobile view it should come below the logo.

[Author]

Posts