Return to previous page

Header top bar - by Dittemila - on WordPress WooCommerce support

This topic has 15 replies, 2 voices, and was last updated 7 years ago ago by Rose Tyler

Dittemila

Participant

November 16, 2017 at 14:30

Hallo. I have added some text in the header top bar. It shows up in the left side.

How can I place it in the center/ middle of the header top bar?

Thank you, kind regards

#177806 Copied

14 Answers

Rose Tyler

Support staff

November 16, 2017 at 14:33

Hello,

You may add text element in Appearance > Widgets > Place in header top bar area.

Regards

#177808 Copied

Dittemila

Participant

November 16, 2017 at 14:44

Yes and I did that.

Now my question again is; how can I place the text in center top bar

#177809 Copied

Dittemila

Participant

November 16, 2017 at 14:51

And another question.

On mobile device, I need to add this text in the pink menu line: Julegaver byttes frem til D. 10 January<3

#177810 Copied

Rose Tyler

Support staff

November 16, 2017 at 15:04

Hello,

Here available only “Place in header top bar” area. If you have CSS skills you may play around with styles and width of the area.

To show an element on mobile only, you need to hide it on different devices https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524299/Responsive+Settings.

Regards

#177815 Copied

Dittemila

Participant

November 16, 2017 at 17:46

I do not have any css skills so I have to ask you for a css to place my content in center header top bar.

#177830 Copied

Dittemila

Participant

November 16, 2017 at 18:25

I do not have any css skills so I have to ask you for a css to place my content in center header top bar.

I have now placed text in my pink menu line on mobile device. but the pink line is getting very big. You placed this css to make it smaller earlier: @media only screen and (max-width: 480px) {
.block-with-ico {
font-size: 0px;
margin-bottom: 20px !important;

When I change the margin bottom size, the pink line is not getting any smaller?

can you help?

#177833 Copied

Dittemila

Participant

November 17, 2017 at 10:24

I do not have any css skills so I have to ask you for a css to place my content in center header top bar.

I have now placed text in my pink menu line on mobile device. but the pink line is getting very big. You placed this css to make it smaller earlier: @media only screen and (max-width: 480px) {
.block-with-ico {
font-size: 0px;
margin-bottom: 20px !important;

When I change the margin bottom size, the pink line is not getting any smaller?

can you help?

#177874 Copied

Rose Tyler

Support staff

November 17, 2017 at 11:32

Hello,

Please provide wp-admin access in Private Content.

Regards

#177882 Copied

Dittemila

Participant

November 17, 2017 at 11:36

Ok

Please, contact administrator
for this information.

#177883 Copied
Rose Tyler

Support staff

November 17, 2017 at 11:58
Hello,

I do not have any css skills so I have to ask you for a css to place my content in center header top bar.

– it is difficult to give you universal code because the code depends on content that you need to place in the center of the top bar, for example, http://prntscr.com/hbmg5q
```
.top-bar .languages-area {
    width: 60%;
    max-width: 60%;
}
.top-bar #icl_lang_sel_widget-2, .top-bar #text-3 {
    display: inline-block;
}
.top-bar #text-3 {
    float: right;
}
```
2. I’ve changed margin-bottom and padding-top: https://gyazo.com/84256cd41919d9086c7ccb93d53b0b18 > http://prntscr.com/hbmi60 + http://prntscr.com/hbmicg = http://prntscr.com/hbmiii

Regards
#177890 Copied
Dittemila

Participant

November 17, 2017 at 21:35

Thank you. That is what I wanted.

Where do I paste in this css:

top-bar .languages-area {
width: 60%;
max-width: 60%;
}
.top-bar #icl_lang_sel_widget-2, .top-bar #text-3 {
display: inline-block;
}
.top-bar #text-3 {
float: right;
}

#177951 Copied

Rose Tyler

Support staff

November 20, 2017 at 09:18

Hello,

Sorry for the delay due to the weekends.
Add the css code in custom.css file.

Regards

#178011 Copied

Dittemila

Participant

November 20, 2017 at 10:40

thank you Rose

kind regards Catrine

#178034 Copied

Rose Tyler

Support staff

November 20, 2017 at 10:43

You’re welcome!

Regards

#178036 Copied
Viewing 15 results - 1 through 15 (of 15 total)