Header top bar - by Dittemila - on WordPress WooCommerce support

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

  • Avatar: catrine87
    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

    14 Answers
    Avatar: Rose Tyler
    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

    Avatar: catrine87
    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

    Avatar: catrine87
    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

    Avatar: Rose Tyler
    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

    Avatar: catrine87
    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.

    Avatar: catrine87
    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?

    Avatar: catrine87
    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?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 17, 2017 at 11:32

    Hello,

    Please provide wp-admin access in Private Content.

    Regards

    Avatar: catrine87
    Dittemila
    Participant
    November 17, 2017 at 11:36

    Ok

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    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

    Avatar: catrine87
    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;
    }

    Avatar: Rose Tyler
    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

    Avatar: catrine87
    Dittemila
    Participant
    November 20, 2017 at 10:40

    thank you Rose

    kind regards Catrine

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 20, 2017 at 10:43

    You’re welcome!

    Regards

  • Viewing 15 results - 1 through 15 (of 15 total)

The issue related to '‘header top bar’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.