Center menu on navbar while scrolling

I have removed one item from the menu, but when scrolling across the website, it is not centered? How do I fix it?

Attachments:

You must be logged in to view attached files.

Hello kr.daskalov,

Thanks for reaching to us and appreciate your patience.

You see the menu is ‘not’ centered because the container of logo is smaller than other so it makes you feel like that. https://prnt.sc/26-Adkw0G8ZX

Kind Regards,

Hi Hung, would you please point me to where I could change these settings?
I looked inside header builder, html blocks and widgets, but I can’t really find this sticky header, that appears on scroll only.

Thank you.

Hello kr.daskalov,

Sorry, but your question is a bit unclear to me. Please describe in more details, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

Well, you see, the navbar that appears when you are scrolling (sticky navbar) is not the same as when you are at the top of the page, right? How do I access the settings of the sticky navbar? So as to change the logo container width, as you have suggested.

Attachments:

You must be logged in to view attached files.

Hello kr.daskalov,

Navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through admin bar directly https://prnt.sc/Ct9ehRDvvDV9.

Disable Sticky header clone option https://prnt.sc/uKCCAWsUbXg4,

Click on the Settings button > turn on Make it sticky option https://ibb.co/RQJNRLQ https://ibb.co/yskkxD1

Please refer to documentation for more details

https://xtemos.com/docs-topic/woodmart-header-builder/
https://xtemos.com/docs-topic/how-to-enable-sticky-header-option/

Regards,

Ok. That would work, but I like how when scrolling, the navbar contains all of the information — the logo, menu and the additional buttons on the right, but in a more compact way and in a single row.

The proposed method would just make the first section sticky, which does not contain menu navigation.

Isn’t there a way to just edit the horizontal spacing of the sticky header?

Thank you for your assistance.

Hello kr.daskalov,

Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

Regards,

Hi,

Here is a graphic explanation of what I want.

Attachments:

You must be logged in to view attached files.

Hello kr.daskalov,

Thanks for details.

Please edit the Main header layout and select the second one and double check https://ibb.co/r3Sn2JH

You can read more about the layouts here https://xtemos.com/docs/woodmart/header-builder/header-rows-flex-layouts/

Regards,

That didn’t do it. Is it possible that the compressed sticky navbar (while scrolling) just has different settings from the main fixed one on the top?

Attachments:

You must be logged in to view attached files.

Hello kr.daskalov,

Can you please increase width of sticky logo and check again? https://ibb.co/VvyVH3x

Regards,

Increasing the width of the sticky logo does not change anything as well.

By default it was at 200px, but in the browser it shows as 120px.
Changing it, doesn’t do anything. Cleared the cache and everything.

Attachments:

You must be logged in to view attached files.

Hello kr.daskalov,

Thanks for your patience.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Best Regards,

Hi, I need an email, to create temporary login credentials.

Hello kr.daskalov,

You can use any random email to create the account. Then share the information here, using the private content field.

Regards,

Here it is.

Hi kr.daskalov,

Thanks for details.

Would you mind if I deactivate extra plugins for testing? Please confirm me back.

Regards,

Sure, go ahead.

Bear in mind that the website is part of a multisite structure. I have provided you super admin privileges for the Network, but check if you can indeed network deactivate and activate plugins.

Hello kr.daskalov,

Thanks for your patience.

You can create a dev site – also called a Staging platform where you can test issues, enable/disable features/plugins thus such changes will affect the main site. The below article will help you to create it:

https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

If you have any questions please feel free to contact us.

Kind Regards,

I don’t want to create a staging website currently. I just want to center the menu on the scrolling navigation bar.

[Hung Pham]

Hello kr.daskalov,

Thanks for your patience.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.whb-sticked .wd-logo img[width]:not([src$=".svg"]) {
    max-width: 100% !important;
}

Kind Regards,

• This reply was modified 3 weeks, 5 days ago by Hung Pham.

This made the sticky logo bigger, but no effect on the menu. This is quite the puzzle.

Attachments:

You must be logged in to view attached files.

Hello kr.daskalov,

As I described above. 3 columns’s width are flexible, which means it depends on content itself.

But inside the container, the menu already centered. Do you want to set fixed for left and right columns to make it looks centering for menu?

Kind Regards,

Yes, I would like to set fixed left and right columns, to make it centred relative to the content of the website (not centered within the navigation bar).

Hello kr.daskalov,

Please add above Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Desktop:

.whb-sticked .whb-col-left,
.whb-sticked .whb-col-center,
.whb-sticked .whb-col-right{
	width: 33.33%;
}

Regards,

Yes! That finally did it! Thank you for your patience and support!

Hello kr.daskalov,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts