Logo position

Hi,

I upload logo dimension 133x55 and here is the problem

1. It very close to the top and not align with the banner top ad banner. then I adjust the margin-top: 25px. it move down and align with ad banner, however it is not in middle of the sticky menu.

2. Logo on mobile doesn't move to to fit on the menu sticky bar.

3. Inset widget display very small on mobile (vertical). I mean small is the width is not fit the screen like sidebar

here you can take a look at my website link www.test.thoinayonline.com.

Hi,

You can add this code into css/override.css file:

Code: Select all

.imageLogo > img {
margin-top: 45px;
}

and this into css/mobile.css file:

Code: Select all

.imageLogo > img {
margin: 10px auto;
float: none;
display: block;
}

or you can use logo difined in CSS and in this case add only this code into css/override.css file:

Code: Select all

a.cssLogo, #gk-logo-small.cssLogo {
background-image: url('../images/style1/logo.png');
}

with your own image logo from News2/images directory.


Regarding the inset you're right, please this selector: #gk-inset into css/mobile.css file (line 28), after modifications, this code should looks like:

Code: Select all

#gk-banner-left,
#gk-banner-right,
#gk-banner-left + #gk-banner-right,
#gk-inset {
   clear: both;
   float: none;
   margin: 0 auto;
   max-width: 480px;
   width: 100%;
}

Thanks, I'll also add this fix in the next theme update..

Hi,
I got number #2 correct.

Number #1 got little tricky here.
A. I insert this code to override.css
.imageLogo > img {
margin-top: 45px;
}
Here what happen----Logo align with the ad banner but when scroll down the logo not in block what the sticky bar menu. it will appear below stickymenu bar in both desktop and mobile.

So I just adjust it to 5px

B. I insert this code into mobile.css

.imageLogo > img {
margin: 10px auto;
float: none;
display: block;
}
Here what happen-----the Logo move to right position ---which is good
- when I hold my phone vertical and scroll down it not in block with the sticky mobile menu, it somewhere on top...look not right.
- when I rotate my phone to horizontal and scroll down it will be in block with the sticky mobile menu.

Please help

thanks

Hi,

I think it will be much easier to use CSS defined logo in this case, try to select this kind of logo in your News2 -> Template Options -> Theme branding tab, then you can replace images/style1/logo.svg file with your own svg file. If you don't have svg vector file with your logo, please remove default logo.svg file and replace images/style1/logo.png file with your own.

I went to Theme branding and change it to Defined in CSS code

and insert this code the code below to override.css with the logo in the news2/image directory but it still doesn't work.
a.cssLogo, #gk-logo-small.cssLogo {
background-image: url('../images/style1/TN-logo.png');
}

Hi,

Please add !important into your code:

Code: Select all

a.cssLogo, #gk-logo-small.cssLogo {
background-image: url('../images/style1/TN-logo.png')!important;
}