Can I do this?

Hi,

I have a question.
I want something like this:
https://ibb.co/mJXcGm
(that top the top bar, with the text and check marks: gratis bezorging vanaf 20…..etc)

Can you please guide me how I can make this?
If I try to make it it does not look good.
I want it that it looks like this on mobile:
https://ibb.co/b3nBbm

So just one info point.

Please help

Hi,

Sorry, but we can’t see your screenshots and get an error Access denied.

Regards

Oh. Strange… I just want a top bar like on the website:
http://Www.wehkamp.nl

With the check Marks, And responsive like that.

Thanks!

Hello,

Did you try to add your content to the top bar text section in Theme Settings -> Header -> Top bar. Place your text there and we will provide you with a custom CSS code to make this text full width.

Regards

Hi Thanks for the reply!

But when i do this it does not look very good on mobile..
Is it possible to only set 1 point visible on a mobile phone?

maybe with a html block ?

Could you please enable it now so we can take a look and prepare some custom CSS for you to make it look better on mobile devices?

I have enabled it!

can you also hide the my account and wishlist shortcut in the top bar? (not in the header, but above it on the right)

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

.top-bar-right {
	display:none!important;
}

div.top-bar-left {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: block;
	line-height: 42px;
}

div.topbar-content {
	display: block;
}

div.topbar-content:before {
    display: none;
}

Sorry but on mobile it does not look good.. the point ends with ‘…’

Is there a way do hide it on mobile phones?

Yes, you can add this snippet to the custom CSS for mobile devices only to hide it

.topbar-wrapp {
	display:none!important;
}

I already find out the css code for it!

Thanks for the help.

OK, great!

[Author]

Posts