Border bottom – Main header

Hi,

Is it possible to have border bottom of main header appeared as boxed (to have the same width as content and not to be appeared full width)? Even if I select the option Container–>Boxed at Border bottom options, it is still appeared full width.

Thank you in advance.

Attachments:

You must be logged in to view attached files.

Hello,

You can try the “Header Sweets Bakery Overlap” as your default header. It designed in the boxed layout except of full width.

Screenshot: https://jmp.sh/9ON1SAC

Result: https://jmp.sh/SfmmOVu

If you do not have “Header Sweets Bakery Overlap“. You can import your headers by following the below documentation: https://xtemos.com/docs/woodmart/header-builder/how-to-exportimport-headers/

Best Regards.

Hi,

I think you didn’t understand my question. I don’t want to have my main menu into a box, I just want to have to have my border bottom of my main header to be appeared as “top-divider” between logo and main menu but not fullwidth (for example like on the website https://pimpstreetwear.gr/).
I just want the border to be appeared like at my attached screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

I got your point. Kindly provide your login details so I can check that is it possible to limit the border length in that header which you currently using or not.

Best Regards.

Hi,

Please find attached my login details.

You can also check another website with my desired border appearance here:

https://www.patousakishoes.gr/

Thank you in advance.

Hello,

To display the border as like the attachment you shared. You can use the below CSS in Theme Setting >> Custom CSS >> GLobal CSS section:

.whb-general-header {
    margin-left: 8%;
    margin-right: 8%;
}

Result: https://jmp.sh/Wrxg2IR

Best Regards.

Hi,

I tested your code but I think it doesn’t work correctly like on my reference website. Please check my attached screenshots. You will see that the border doesn’t follow the content correctly to the different screen-sizes. In addition, at mobile version of the website main header overlaps the home slider.

Attachments:

You must be logged in to view attached files.

Hello

Move that CSS code to Custom CSS for desktop from Global Custom CSS from Theme Settings >> Custom CSS.

Best Regards.

I moved it to Custom CSS for desktop as per your advice but I still have the same appearance for screen sizes bigger than 1024px. Border is not adapted accordingly (it doesn’t have the same width with content of top bar and home slider). Please check my attached screenshots.

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been solved. I have disable the header bottom border and add the border with custom CSS code added in Theme Settings >> Custom CSS >> Custom CSS for desktop section.

Please check your site now after removing the browser cache.

Best Regards.

I checked the site and indeed the border is appeared correctly now at desktop version of the site but it is not appeared on tablet & mobile versions.

Is it possible someway to have the border appeared at the above versions of the website too (to have the same width with content of home slider as it is appeared currently on desktop version)? Please check my attached screenshots.

Attachments:

You must be logged in to view attached files.

Hello,

Please check your site now, I have moved the custom Code in the Global Custom CSS section.

Best Regards.

Thank you very much!

Well, d_ch!.., it’s been great chatting with you! I hope I resolved your issues thoroughly.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts