Return to previous page

Logo moves on sticky header - by beerbefore

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

beerbefore

Participant

September 11, 2018 at 23:11

My logo is generally central, but when I scroll down the page, it goes to the left.
Where to fix it to be central all the time?
https://screenshots.firefox.com/cLQyq53qXNiM8ikB/test717.futurehost.pl
https://screenshots.firefox.com/H5pRq5wKOGaH2w71/test717.futurehost.pl

regards

Please, contact administrator
for this information.

#199309 Copied Theme version: ? WooCommerce version: latest

14 Answers
Rose Tyler

Support staff

September 12, 2018 at 09:19
Hello,

You may use this custom css code (Theme Options > Styling > Custom css > Global custom css):
```
.fixed-header .header-logo, .fixed-header .menu-wrapper {
    width: 100% !important;
    position: absolute;
}
.fixed-header .navbar-header {
    width:  auto;
}
.fixed-header .header-logo {
    left: 47.5%;
    top: 8px;
}
.fixed-header {
    padding-bottom: 90px;
}
.fixed-header .menu-wrapper {
    bottom: -200%;
}
@media only screen and (max-width: 1400px) and (min-width: 1200px){ 
    .fixed-header .header-logo {
        left: 46%;
    }
}
@media only screen and (max-width: 1201px) and (min-width: 992px){ 
    .fixed-header .header-logo {
        left: 45%;
    }
}
@media only screen and (max-width: 991px){
    .fixed-header .header-logo {
        left: 44%;
    }
    .fixed-header {
        padding-bottom: 65px;
    }
}
@media only screen and (max-width: 768px){
    .fixed-header .header-logo {
        left: 41%;
    }
}
@media only screen and (max-width: 480px){
    .fixed-header .header-logo {
        left: 35%;
    }
}
```
Regards
#199347 Copied
beerbefore

Participant

October 4, 2018 at 11:56

Thanks for CSS, but I don’t think it work as it should now…
http://test717.futurehost.pl/xstore/wp-admin/customize.php?url=http%3A%2F%2Ftest717.futurehost.pl%2Fxstore%2F

Menu shows over the logo when scrolled down 😛

#200469 Copied

Rose Tyler

Support staff

October 4, 2018 at 12:14

Hello,

Have you changed header type http://prntscr.com/l22r7s ?
Please provide screenshots for better understanding the desired result and temporary wp-admin access.

Regards

#200470 Copied

beerbefore

Participant

October 4, 2018 at 12:24

https://screenshots.firefox.com/FRXXeALju0UTEgKE/test717.futurehost.pl
https://screenshots.firefox.com/Lr8F1wNwzqxV43Eb/test717.futurehost.pl

#200471 Copied

beerbefore

Participant

October 4, 2018 at 12:36

access attached 🙂

Please, contact administrator
for this information.

#200472 Copied

Rose Tyler

Support staff

October 4, 2018 at 12:36

Hello,

XStore 5.0 was major update and we changed a lot of things https://xstore.8theme.com/update-history/
Please delete the previouse custom css code and let me know, I will provide a new css code.

Regards

#200473 Copied

beerbefore

Participant

October 4, 2018 at 12:58

OK – done
but now header settings seems not to work as chosen:
https://screenshots.firefox.com/4pOoWdj5Q5UbReLH/test717.futurehost.pl

http://test717.futurehost.pl/xstore/wp-admin/customize.php?url=http%3A%2F%2Ftest717.futurehost.pl%2Fxstore%2F

#200479 Copied

Rose Tyler

Support staff

October 4, 2018 at 12:59

Also, select header type that you plan to use on the site and set settings in Theme Options appropriate to your needs.
Let us know once it will be done.

Regards

#200480 Copied

Rose Tyler

Support staff

October 4, 2018 at 13:03

The logo will be centered once you enable cart icon or any other element in header via Theme Options > Header > Header layout.
If you do not want to show any elements except menu and logo just let us know.

Regards

#200483 Copied

beerbefore

Participant

October 4, 2018 at 13:53

At the moment I will start with the catalogue mode.

And I’d like to play a bit with header, to see which layout looks and works best, but It’s quite hard, when It doesn’t appear where expected on example.

How to test different layouts then?

#200486 Copied
Rose Tyler

Support staff

October 4, 2018 at 14:30
As you can see on this screenshot http://prntscr.com/l24hyy , cart and search are enabled.
We are here to help you, so feel free to ask and we will gladly provide custom css that will be suitable for your needs.
Please try “Variant center 3” > http://prntscr.com/l24rcp and use this custom css code for fixed header:
```
.fixed-header .container, .fixed-header .container-wrapper, .et-header-full-width .fixed-header .container-wrapper {
    flex-wrap: wrap;
    justify-content: center;
}
.fixed-header .header-logo {
    flex-basis: 100%;
    text-align: center;
}
```
http://prntscr.com/l24rpq

Regards
#200487 Copied
beerbefore

Participant

October 4, 2018 at 22:02

Thank you! 🙂

#200529 Copied

beerbefore

Participant

October 4, 2018 at 22:06

oh, and since I asked about that on another topic and you moved me here – is it possible to DECREASE the size of logo on mobile and tablet? 😉

#200530 Copied
Rose Tyler

Support staff

October 5, 2018 at 07:11
```
@media only screen and (max-width: 992px){
    .header-logo img {
        max-width:  80px !important;
    }
}
```
Regards
#200535 Copied
Viewing 15 results - 1 through 15 (of 15 total)