Logo on mobile only and centered

Illdy
1

Hello,

I would like to display the logo on mobile only, and have it centered there.
Also, I want to adjust the padding around the logo so that it does not overlap with the jumbotron image on mobile.

Thank you!

www.marialavestedtsegeblad.se

2

Hi there,

  1. For having the logo only show on mobile, use this CSS:
@media (min-width: 768px){
#sticky-wrapper div.top-header div.row div.col-sm-4.col-xs-8 a img{
	display:none;
}
}
  1. For centering the logo on mobile use this CSS:
@media (max-width: 768px){
#sticky-wrapper div.top-header div.row div.col-sm-4.col-xs-8{width:95%;text-align:center;}
#sticky-wrapper div.top-header div.row div.col-sm-8.col-xs-4{width:5%}
}

Add both to appearance \ customize - additional css.
Hope this helps.

3

Thank you!

The padding around the logo still looks off, though. Please have a look at the mobile site. Since the logo overlaps with the jumbotron image it chops off parts of it. Is there a way to have the jumbotron start below the logo?

4

Hello there,

I hope you are doing well today.

Please try adding the following CSS to change the mobile logo:


@media only screen and (max-width: 768px){
.open-responsive-menu .fa {
    color: greeen;
}
}

@media only screen and (max-width: 768px){
#header .top-header {
    top: -28px;
}
}

@media only screen and (max-width: 768px){
.col-sm-4.col-xs-8 img {
    width: 124px;
    height: auto;
}
}

Best Regards,
Support

5

Great, that’s much better!

But is it possible to have the logo image bigger so that the text is readable (without having the logo overlapping with the jumbotron)?

6

Hi there

You have to modify this code:

@media only screen and (max-width: 768px){
#header .top-header {
top: -28px;
}
}

to this:

@media only screen and (max-width: 768px){
#header .top-header {
top: -36px;
}
}