[Dan D]

Hi.

I’m trying to work out how to float my site logo on the top left of the screen and have it over the top of the featured slider and the menu bar, with the menu bar and slider all the way at the top of the screen.

Thanks in advance, Dan.

[Sakin]

@dan-d: Please post in your site URL then I can check in.

[Dan D]

Here you go buddy

http://reecoil.com/

Thanks

[Sakin]

@dan-d: I check in your site and it’s already in left above you menu. I guess you want to reduce the spaces.

First, add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
#site-branding, .logo-right #site-header { padding: 0; }

Then if you futher want to reduce the space, then you can change the padding in the following css and then add it in “Appearance => Customize => Theme Options => Custom CSS Options” box:

#masthead .wrapper { padding-right: 20px; padding-left: 20px; }
#masthead { padding-top: 20px; padding-bottom: 20px; }

[Dan D]

That wasn’t quite it.

I was actually wanting the logo in front of the slider, sort of like this:

#site-branding, .logo-right #site-header {
position: absolute;
left: 110px;
top: 100px;
z-index: 9999;
}

But this actually looks rubbish for other reasons….

[Sakin]

@dan-d: ok you found css that you like

[Dan D]

Hi @sakin

Sorry for being a pain.

Am I able to use a different size logo on mobile browsers? Or can the responsive design resize the logo smaller for mobile browsers?

Thanks, Dan

[Sakin]

@dan-d: If you logo is larger then the device screen then responsive will make it fit to 100%. But if your logo is small then it won’t change it.

[Dan D]

Thanks for the reply @sakin.

The size of the logo is fine on laptop and tablet browsers (I don’t want it smaller on them) but too big on mobile.

[Sakin]

@dan-d: You can change the maximum width in the following css and then add it in “Appearance => Customize => Theme Options => Custom CSS Options” box:

@media screen and (max-width: 767px) {
    #site-logo img { max-width: 110px; }
}

[Dan D]

Awesome @sakin! You da, Man!! 😀

[Sakin]

@dan-d: If like my support and Catch Responsive theme then please support by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-responsive?rate=5#postform

[Dan D]

Review and rating given dude!! 🙂

[Sakin]

@dan-d: Thanks a lot. You made my day 🙂

[Author]

Posts