Two different top bars for desktop and mobile

Support
#1

Hi support team!
I used some codes that I found in the forum to create 2 different top bar alignments for desktop and mobile. Works good so far but I can’t manage to change the spacings - margin top and bottom as well as between the two lines.
Whenever I change the margins it either looks good on tablet or on iphone, but never both.

I also see that the second line is not really centered.

Could you help me out please?
Thanks!!

#2

Hello There,

Thanks for writing in! Please be advised that the Topbar content is supposedly will only accept text. Any custom html code added may invalidate the output tag hence would result to other issues. It has to be noted that the text output of the topbar content will be wrapped with <p></p> tags. In your case, you added a custom html code with <div> tag as a container in it. This creates the issue because it left the <p> tags invalid and created spacing issues as well. To resolve your issue, please update your content and use <span> instead. You may have this code:

<span class="desktop-top" ><a style="font-size:17px; font-weight:400" href="tel:00498920034311"><i class="x-icon x-icon-phone" data-x-icon=""></i> + 49 (0)89/20 03 43 11</a>     <a style="font-size:17px; font-weight:400;" href="https://www.heilpraktiker-muenchen-west.de/kontakt#terminbuchung"><i class="x-icon x-icon-calender" data-x-icon=""></i> Terminbuchung</a>
</span>


<span class="mobile-top"><a style="font-size:17px; font-weight:400;" href="tel:00498920034311"><i class="x-icon x-icon-phone" data-x-icon=""></i> + 49 (0)89/20 03 43 11</a><br>
     <a style="font-size:17px; font-weight:400; " href="https://www.heilpraktiker-muenchen-west.de/kontakt#terminbuchung"><i class="x-icon x-icon-calender" data-x-icon=""></i> Terminbuchung</a>
</span>

After adding this code, you may adjust the margins and padding of the topbar content using your custom css.

Please let us know if this works out for you.

#3

Thanks for that. Somehow I can not align only the desktop topbar to the right. Tho only thing that worked was this code:
.x-topbar .p-info {float:right}
but that effects the mobile top bar as well.

There is no way to adjust any margins anymore.
I noticed that there seems to be a 3rd screen layout for the topbar where there are already 2 rows but the text is not centered.

#4

Hi There,

Could you please try adding this custom CSS as well?

.x-topbar .p-info {
   border: none;
}
@media (min-width: 980px){
    .x-topbar .p-info {
        float: right;
    }
}

Let us know how it goes!

#5

Hey Thal that worked for the desktop screen. This 3rd layout - on screens between 980 and 768 px - still shows:

#6

Hi There,

Please update the previous CSS to this:

.x-topbar .p-info {
   border: none;
}
@media (min-width: 768px) {
    .x-topbar .p-info {
        float: right;
    }
}

Hope it helps :slight_smile:

#7

Hm, it is stll another alignment before the mobile view.

This is this 3rd view, that I’d like to cancel. Now with the new code aligned to the right.

This is the mobile view wich is fine, only I’d like to make the margin bottom samller.

#8

Hi There,

I am not exactly sure how you want it.

@media (min-width: 768px) {
    .x-topbar .p-info {
        float: right;
    }
}

That CSS move that topbar information on the right from 768px and up.
You may update that code to this so it will affect desktop only:

@media (min-width: 980px) {
    .x-topbar .p-info {
        float: right;
    }
}

I don’t know yet how you want it on the that specific screen size before mobile, but we can use the following media queries:

@media (min-width: 768px) and (max-width: 980px) {
    .x-topbar .p-info {
       /*Add CSS for this  size*/    }
}

To remove space below that text on mobile view only, use this:

@media (max-width: 480px) {
.x-topbar .p-info {
    padding-bottom: 0;
}
}

Hope this helps.

#9

I_m sorry, I really don’t know what is going wrong. It sitll does not work.

  1. The last code you gave me, to remove the space below text on mobile

had no effect. I don’t see why.

  1. To clafify what I mean
    On decktop screen: I would like the topbar to be aligned to the rigt and all details in one row.
    On ALL other screen: I’d like it to be center aligned in 2 rows with less space above and beelow text…

Maby it is clearer now?

#10

Hi,

You can try this code instead

@media (max-width: 767px) {
.x-topbar .p-info {
   padding:0;
}
}

Please note that it will take effect on mobile screen only.

Thanks

#11

Thanks, that worked finally :slight_smile:
Can you help me make the screen after desktop and before mobile look the same as mobile (2 rows, center aligned, padding bottom:0)?

#12

Hi blueprint,

I’ve checked your website and I can see you have this CSS snippet:

@media (max-width: 969px){
    .desktop-top {
        display: none !important;
    }
}

Please replace it with this one and this should fix this issue:

@media (max-width: 969px){
    .desktop-top {
        display: none !important;
    }
    .x-topbar .p-info {
        float: none;
        text-align: center;
        padding: 0.8em 1em 1em;
    }
}

Thanks.

#13

Thanks for that code, but the alignment is still not centered.

And is it possible to remove this gap to the right on dektop:

#14

Hey @blueprint,

The alignment is centered as you can see in the screenshot below.

To remove the gap, please add this code.

.x-topbar-inner.x-container.max.width {
    max-width: 100%;
    width: 100%;
}

Hope that helps.

#15

Thanks, removing the gap worked well. I changed the value to 95% to have a little space left, if that is the right way to do it…

Yes, you are right of course the text is center aligned. Sorry, that is a problem of the language. What I meant to say was that I’d like the CONTENT of the topbar to be center aligned as well. So that it would look like this on all mobile views exept desktop:

Can you provide a code for that? I tried some, but couldn’t figure it out…

#16

Hello There,

I have investigated your site and the custom css code is already there in the page. It is just that there are two conflicting css codes which negates the other previous one.

So instead of using @media (min-width: 768px) {, you may use @media (min-width: 970px) {.

Hope this helps.

#17

Great! That was it! Thank you! I tried to change the padding here too, by changing this:

    @media (max-width: 767px) {
    .x-topbar .p-info {
       padding:1;
    }
    }

into this

@media (max-width: 970px) {
.x-topbar .p-info {
   padding:1;
}
}

but that was obviously wrong. Can you tell me the right code, please?

#18

Hi There,

You did not put a unit on your padding value. It should be padding: 1px; or padding: 1em;

Feel free to adjust the value, just don’t forget the unit.

Cheers!

#19

Oh, I see. Ok, did that. Although the padding effects both mobile view and others till 970, the paddings to the top are not the same - on mobile the padding is smaller. Why is that?

#20

Hey @blueprint,

It is because of this code in your custom CSS

Change padding-top to 0.

If you have additional questions, please open a separate thread because the longer a thread becomes, the more confusion it introduces.

Thanks.