Return to previous page

Mobile header alignment - by strangehaven

This topic has 9 replies, 3 voices, and was last updated 5 years, 7 months ago ago by Olga Barlow

strangehaven

Participant

May 9, 2019 at 18:24

On mobile my site header is misaligned to the right. Is there a way that I can align it center?

Please, contact administrator
for this information.

#213611 Copied Theme version: 1.0 WooCommerce version: 5.2

8 Answers

Rose Tyler

Support staff

May 10, 2019 at 07:41

Hello,

The problem is caused by this custom CSS code http://prntscr.com/nmp5k4 Please find where you added this code and delete or change it.

Regards

#213637 Copied

strangehaven

Participant

May 10, 2019 at 22:05

I removed those snippets of code and it doesn’t appear to have changed anything.

#213687 Copied
strangehaven

Participant

May 11, 2019 at 17:15
So I was able to find all of these snippets of code.
If you view my site without the code below my logo is way too small.
```
header .header-logo img {
    max-width: 900px !important;
}
```
The above code was added so that my logo header would be the appropriate size.
Without these bits of code my logo is centered but way too small.

The above code works for the logo header size for my site on desktop perfectly, except the header logo is not fitting the mobile screen size and landscape mobile size and is off centered.
#213696 Copied
Rose Tyler

Support staff

May 13, 2019 at 08:36
Hello,

Sorry for the delay due to the weekends.
To apply the code for desktop only, you can use media query. Here is an example – http://prntscr.com/nnt4r7
```
@media only screen and (min-width: 992px) {
    your_code
}
```
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Regards
#213739 Copied
strangehaven

Participant

May 14, 2019 at 19:43
thank you.

Im using the css:
```
@media screen and (max-width: 480px) {header .header-logo img {
    margin-left: auto;
    margin-right: auto;
max-width: 250px !important;
}}
```
to make the header logo a bit larger, but it offsets it to the right . Is there anyway to fix this?
#213831 Copied
Rose Tyler

Support staff

May 15, 2019 at 07:33
If you delete the mentioned code, the logo will look fine – http://prntscr.com/noqay9
Or you can change this code http://prntscr.com/noqbvm to http://prntscr.com/noqcb5
```
@media screen and (max-width: 480px) {
    header .header-logo img {
        margin-left: auto;
        margin-right: auto;
        max-width: 250px !important;
    }
    .template-container .header-logo {
        max-width: 250px !important;
    }
}
```
Regards
#213838 Copied
strangehaven

Participant

May 17, 2019 at 21:04

Thank you for all your help! It really is greatly appreciated!

I was able to center it by tweeking the margin-left

A few other minor things on mobile:

1. Is it possible to disable the search at the top only on mobile view?
2. I am not able to fix the menu links color on mobile – there is a red color showing up for the active links and I changed everything within the 8theme admin – do you know where I can change this?

Thanks so much!

#213998 Copied
Olga Barlow

Support staff

May 20, 2019 at 14:56
Hello,

1) Add the following custom to child theme style.css
```
@media only screen and (max-width: 992px){
    .navbar-header.navbar-right .navbar-right .header-search{
        display:none;
    }
}
```
2) Unfortunately, this is a theme bug and we’ll fix it in next theme update. Use the following custom to change the color before the update if you need it:
```
@media only screen and (max-width: 992px){
    .template-container .mobile-menu-wrapper .menu > li.over > a {
        color: #b351f1;
    }
}
```
Regards
#214049 Copied
Viewing 9 results - 1 through 9 (of 9 total)