Custom header design

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

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.

Enable the Mobile Header in Customiser > Layout > Header

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

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

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

You can add this CSS:

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

adjust the height to suit.

Thanks, it worked perfectly. :)

Glad to hear that

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

Can you share a URL to the site ?

Hello,

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

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

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.