SKT Design header and logo spacing and mobile clashing

[Jason]

Hi there my logo is a transparent PNG and works great with my header:
http://bondwatch.co.uk/
However when I look at it on my mobile or tablet, the logo appears over the writing and clashes badly its hard to make out.

1) Is there a way to make sure that the transparent logo stays in the blank purple area of my header.

2) is there a way to make the black bar that the menu is on height half the size it currently is? I want it slightly just higher than the font size. Currently there is code already in my Custom CSS box to spread the menu writing out to the left more, I took it from another thread on this forum. So here is what my Custom CSS box looks like presently:

Thank you awesome team 🙂

.header{padding:0px !important;}
header .header-inner .nav ul{margin:60px 0 0;}
.header .header-inner .nav ul li{padding-right:35px;}
.slider-main { display:none;}

[Jason]

Bumping never got a reply, please help 🙂

[Sonl Sinha]

Hi Jason,

Kindly go to Appearance>>Customize>>Basic>>Custom CSS Box

Add this code there:

.header .header-inner .nav{margin: 0;}
.header .header-inner .nav ul li a{padding: 9px 12px 7px;}

@media (max-width: 840px){
 .header .header-inner .logo {float: right; margin: 0 20% 0 0; width: auto;}
}

@media (max-width: 480px){
 .header .header-inner .logo {margin: 0 6% 0 0;}
}

Regards,
Dave

[Jason]

Many thanks worked great 🙂

[Sonl Sinha]

🙂

[Author]

Posts