Sticky Header

Is there a way i can remove the logo from the sticky header & move the menu to the left.

Attachments:

You must be logged in to view attached files.

Hello

Yes you can remove the logo from the sticky header & move the menu to the left by following the steps:

1) Unchecked “Sticky header clone” option from the Sticky header tab from Woodmart >> Choose your header >> Click on settings icon and unchecked that option and hit save button to second tab to achieve this:
Screenshot: https://jmp.sh/H5MWX2d

2) Now use the main menu in Menu header row in the first column and remove the logo from that column as shown in the screenshot below:
https://jmp.sh/D68gBZC

3) After doing this you have to click on the pencil icon on the main header row and from the General tab checked the “Make it sticky” option and hit save button:
https://jmp.sh/MHyWh7Q

Result: https://jmp.sh/Dm3k32W

Best Regards

Please could you tell me what i did wrong?

Attachments:

You must be logged in to view attached files.

I obviously want the logo to show on the standard header

Hello

If you want to show the logo on standard header but want to hide the logo from the sticky header then use the below css in Theme Settings >> CUSTOM CSS >> Global Custom CSS:

.whb-general-header .woodmart-logo img {
    max-height: 105px;
     display: block;
}

.whb-sticked .whb-general-header .woodmart-logo img {
    max-height: 60px;
    display: none;
}

Screenshot: https://screenshot.net/6d6xkad

And use the logo and main menu on the left block of main header row. So when the logo is not there in the sticky header then menu covers that margin and aligned to left corner.
Screenshot: https://screenshot.net/4e8vyum

For the sticky logo you have to upload your logo in the second option “Logo image for sticky header”:
Screenshot: https://screenshot.net/7e4v9u1

Best Regards

1. Aizaz Imtiaz Awan = [And use the logo and main menu on the left block of main header row. So when the logo is not there in the sticky header then menu covers that margin and aligned to left corner.]

If I add the menu to the main header row, it also shows up on the standard header.

2. Do I need the first half on the code to hide the logo? Please see screen shot.

3. If you visit my website [ https://solekacrafts.co.uk ] you will see i am very close to the perfect header. I just need to move the menu-main-header to the left, on the sticky header.

Attachments:

You must be logged in to view attached files.

Hello

I have seen your provided screenshot. If you want to hide the logo you must have to use the full css code that I have provided you in the previous reply.

I said that you have to use the main menu in the first block of the main menu row from the left side. That does not mean the menu shown in the right moved to left when you are in sticky header.
That means when you used the logo and then menu in the very first block and when you used my code then the logo goes hidden in the sticky form of header and menu covers its position.

You must have to use your main menu after the logo in the very first block. Check out the below screenshot for better understanding:
https://screenshot.net/4e8vyum

Best Regards

Hi, I’m pretty sure i have correctly followed your instructions but:

1. The main menu is now on my standard header.

2. On sticky header there is an empty space where the logo was.

3. On mobile/tablet the sticky header logo has been removed and it really needs to be visable.

I have provided you with an admin password, if you need to check my setting etc.

Thanks,

Jonathan

Attachments:

You must be logged in to view attached files.

Try to keep the custom CSS provided for desktop devices only to not affect mobile. And remove duplicated menu element from your main header using header builder.

I moved the css code and it worked perfectly. But I have no idea what i’m supposed to do with the main menu.

If i add the main menu to the main header (1st block) it squashes the menu between the logo and search form.

Attachments:

You must be logged in to view attached files.

But you have already added the menu here https://gyazo.com/b5b00214cbe02ed2d4ff8de389c6f90a
So what do you want to do when you added it second time to the header? And obviously it will not be displayed inline in that row because there are a lot of other elements and not enough space for all menu items.

Ok I think we need to start over 🙁

You asked me, at least twice, to put the main menu in the main header. Please see first 2 screen shots.

I have again moved it back to the header bottom, where it is aligned to the right. Its just on the sticky header where i need it moved over to the left. Please see 3rd screen shot.

Attachments:

You must be logged in to view attached files.

Now use the following CSS code

body .whb-clone .woodmart-navigation.main-nav {
	text-align:left;
}

Perfect, thank you 🙂

You are welcome.

[Author]

Posts