[Support request] stalmachopole.com.pl/ – HAUS – top bar

[Robert]

Hi

how are You?

I wanna ask if on:
https://www.stalmachopole.com.pl/

its passible to change the TOP BAR so that he would looks like:
http://www.czokbud.pl/haus2.jpg

On this moment I have 3 elements on ti:
http://www.czokbud.pl/haus1.jpg

Kr
Robert

[David]

Hi there,

can you add then wesprzyj nas link to its own Widget then i can provide some CSS to create that layout

[Robert]

Hi

yep – no problem

done!

thx
Robert

[David]

Order the widgets like so:

1. Lightweight Social Icons
2. wesprzyj nas
3. House Image
4. Language links

then add this CSS:

.inside-top-bar {
    display: flex;
    position: relative;
}
.inside-top-bar  #lsi_widget-1 {
    margin-right: auto;
}
.inside-top-bar .widget_media_image {
    margin-right: 50px !important;
}
.inside-top-bar #custom_html-3 {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

[Robert]

Hi

thx – I used Your CSS code and it looks very good.

one question moge – we decidet to put the haus image quite down – its now on the right
but now are the TXT:

© 2020 DOM WSPÓŁPRACY POLSKO-NIEMIECKIEJ

not in the same line with “CHRONIMY PLANETĘ”
– how could I fix it?

For the imega I used:

<a href="http://www.haus.pl">

<img src="https://www.stalmachopole.com.pl/wp-content/uploads/2020/06/zielony_domek_ochrona_srodowiska_przycisk4.png" width="40" /> CHRONIMY PLANETĘ</a>

Kr
Robert

[Tom]

Hi there,

Give this CSS a shot:

.inside-site-info {
    display: flex;
    align-items: center;
}

.footer-bar-align-right .footer-bar {
    order: 2;
    margin-left: auto;
}

[Robert]

Hi

thx – it works 🙂

I wanna ask more about the top bar: he dissapears on the mobile devices – can I make it visble ?

Kr
Robert

[David]

In Customizer > Additional CSS you have this:

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

remove that CSS to display the top bar on mobile.

And then add this CSS to re-align the widgets:

.top-bar-align-right .inside-top-bar #custom_html-2 {
    margin-left: auto !important;
}

[Robert]

Hi

I did it and it works but:

1. mobile vers:
those two links: “wesprzyj nas” and: polski / deutsch
aren’t in the some line. How could I fix it?

2. desktop version:
how could I move about 100px the link “wesprzyj nas” to the right ?

Kr
Robert

[David]

1. In this CSS change the top: 5px; to top: 8px;

@media(min-width: 769px) {
    .inside-top-bar #custom_html-3 {
        transform: unset;
        left: calc(50% + 100px);
    }
}

2. Add this CSS to adjust the position of the link on desktop:

@media(min-width: 769px) {
    .inside-top-bar #custom_html-3 {
        transform: unset;
        left: calc(50% + 100px);
    }
}

[Robert]

Hi

ad. 1 – it works!

ad. 2. I addes Your code and on the desktop version it lookd good byt on the mobile ver. “wesprzyj nas” movs over the “polski / deutsch”

Thx
Robert

[Tom]

Hi there,

Can you make sure you’ve added the code above as separate blocks of code as opposed to tweaking the original code David provided? The code in the post above has media queries.

So you need this code: https://generatepress.com/forums/topic/stalmachopole-com-pl-haus-top-bar/#post-1338962

And this code: https://generatepress.com/forums/topic/stalmachopole-com-pl-haus-top-bar/#post-1340132

[Author]

Posts