Resize Logo and move

Hello

I am just wondering if it is possible to resize my logo in West pro. I have a fairly large image but when I add it to my front page it is very small. I would like to make the logo larger if possible and also make a few adjustments to its position.

Hello there,

Thank you for asking.

The logo looks smaller because its maximum height is set to 80px by default, the width follows it proportionally. To make it a bit larger, you should need to add extra CSS code. You can pass it through the Simple Custom CSS plugin.

Try to use the following CSS code.

.site-logo {
    max-height: 120px;
}

You should adjust the value to meet your need.

Positioning also can be done by CSS.

I hope this reply helps.

Warmest regards,
Kharis

Thank You i will give that a try.

I noticed that when i do make the changes the menu is now pushed down as it must be tied in with the Logo, Any chance i can separate the 2 so the menu stays near the top of the page with the increased logo size?

Hello there,

Thank you for reporting.

I thought you should need to add the negative top margin to the main menu element.

@media only screen and (min-width: 1025x){
  .main-navigation{
     margin-top: -40px;
  }
}

Adjust the value to meet your need.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Sorry for the late reply but that code doesn’t seem to be doing anything, even when I switch the values around.

Another idea I had is would I be able to make the logo section independent of the menu section, maybe have it overlap? I am finding that when I change my logo size it then changes the whole header size and the white are appears quite large when you start scrolling down the page. Sorry if these sound silly I’m still getting the hang of this.

Hello there,

Thank you for reporting. Could you please post your URL here so I can have a closer look?

Warmest regards,
Kharis

Sorry for the delay, been working on other projects. www.wolfpackdesign.ca
If you notice the menu area is quite thick due to the size of my logo image. Would like the logo image separate, even floating over top of the menu area would be great.

Hello there,

Thank you for the link. It helped me a lot.

Could you please try to add the following CSS code?

@media only screen and (min-width: 601px){

  .site-header .container{
    position: relative;
  }

  .site-header{
    height: 70px;
  }

  .mobile-nav,
  .main-navigation{
    position: absolute;
    top: 0;
    right: 0;
  }

  .mobile-nav{
    margin-top: -10px;
  }

  .slicknav_nav{
    margin-top: 0;
  }  

}

@media only screen and (min-width: 601px) and (max-width: 800px){
 
  .mobile-nav{
    right: 20px;
  }  
  
}  

You should make some adjustments accordingly.

Warmest regards,
Kharis

Works perfect thank you

I’ve having a similar issue, only I just want to make the container around the logo wider so that my site title can fit on one line. I think I figured out the CSS:

@media (min-width: 992px)
.col-md-4 {
    width: 33.33333333%;
}

However, when I tried to change it in the Edit CSS plugin, nothing would change (I changed the width to 60% and it kept disappearing from the CSS).

Any other solutions?

My site: http://webconsulting.martinricard.com/

Hi @mkricard,

Thank you for getting in touch here.

I found a bug in your code. Try to change it to the following.

@media only screen and (min-width: 992px){
.col-md-4 {
    width: 33.33333333%;
}

Regards,
Kharis

@kharisblank,

Looks like I’m still missing something. I even tried adding an important tag after the width number, and nothing changed. Any other ideas?

Thanks.

HI Kharis

I’m trying to move the logo around a bit
I’ve been trying this code to move it close to the top of the screen
.header-logo {
margin-top: 50px;
}

But it doesn’t seem to be working, also I’m wanting to move it towards to left side a bit more as well

As per my post above, Any suggestions on moving the logo?

Hello @tigman88,

I thought you have used an incorrect selector.

Could you please try the following?

.site-branding a{
  margin-top: -20px;
  margin-left: -20px;
}

Regards,
Kharis

Thanks Kharis, You were right I had the wrong selector. Worked great.

Hi Kharis

One thing i’ve noticed is the logo now doesn’t resize with the page, it stays in position and if you shrink the browser window then it cuts off the logo. Is there a way to enable the repositioning of the logo when shrinking a browser window?

Hello there,

Try to apply the following CSS code:

.site-branding a {
    margin-left: 0 !important;
}

#masthead .container{
  width: 100% !important;
} 

Let me know how it goes.

Regards,
Kharis

Thanks Kharis

One question, I now have 2 margin-left css settings, can i just get rid of the original margin-left code all together since i can adjust the position using the new batch of code. Below is what I am talking about

.site-logo {
max-height: 200px;
}

.site-branding a {
margin-top: -75px;
margin-left: -275px;
}

.site-branding a {
margin-left: 100px; !important;
}

#masthead .container {
width: 100% !important;
}