Hide tel# in topbar menu plus border mobile menu

Hi,

I was wondering if you could help with the following:
I would like to disable the telephone number in the top bar on mobile view.
Secondly, I would like the border to be displayed on mobile on the sticky menu. Now I have a border at the bottom of the menu but when scrolling down on mobile view the border disappears.

Could you please help me!

Your prompt reply is really appreciated.

Best regards,

Johan

Hi,

Try to add the following code snippet to the Custom CSS area for mobile devices in Theme Settings

.topbar-wrapp .top-bar-left {
	display: none;
}

Please, provide us a screenshot of the border you are asking about for better understanding.

Regards

Hi,

thx for the custom css. I really appreciate it.

Please find enclosed the screenshot. What I would like to achieve is a border at the bottom of the menu (sticky header) when scrolling. Now it only shows when it’s at the top of the page when the sticky menu appears the border disappears. This is only in mobile view.

Thx!

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.main-header {
    border-bottom: 1px solid #ececec!important;
}

Hi,

Thx a lot for the custom css. It works like a charm.

One more question. I have removed the topbar on mobile view only. However I would like to reduce the margin above the header as well. When you scroll down on mobile the sticky appears and I would like the header to be this size (without the top-margin) also when the header is on top of the page. Please see the attached screenshot

Attachments:

You must be logged in to view attached files.

You can remove this empty top bar space adding this code snippet for mobile devices only

.enable-sticky-header.basel-header-overlap.basel-top-bar-on .main-header {
    top: 0!important;
}

But in this situation, the header may jump on the top bar height on mobile devices when you scroll page down. Sorry, but it is impossible to fix this with CSS code. The only right way would be to hide top bar on both mobile and desktop devices.

Thx! I will try this solution.

Regards,

Johan

OK, write us about the result.

[Author]

Posts