Increase header size in centre of inline menu

Support
#1

I am looking to get my logo in the centre of the nav bar at the top of the page.
I have used this CSS to achieve this so far, but I am looking to now increase the size of the logo to about 300/400 pixels wide.
Is there a way to do this?

.the-logo {
background: url(http://www.pummieproductions.co.uk/wp-content/uploads/2020/01/pummienobkg.png) no-repeat center center;
background-size: contain;
}

Also, is this easier to do with an upgrade to Pro?

Many thanks for you help!

#2

Hello @discomatt,

Thanks for writing in!

You can adjust the logo image size in your custom css itself. Please have it updated and use this:

.the-logo {
  background: url(http://www.pummieproductions.co.uk/wp-content/uploads/2020/01/pummienobkg.png) no-repeat center center;
  background-size: 220px auto;
}

Where 220px is the width of the logo image. Feel free to adjust it.

And yes, if you upgrade to Pro theme, it is much easier to custom the header because with Pro theme, you will have the custom header builder.

Best Regards.

#3

Thanks for the reply!

That definitely helps, but I was hoping that there would be some way that will push the menu either side of the logo to accommodate the new width?

As the code at the moment increases the size, but is more like a ‘zoom in’ effect and the menu doesn’t get any wider.

I am looking into Pro, but I’m quite used to cornerstone’s interface at the moment, so I think I will update after this build is finished.

#4

Hi @discomatt,

Your site is on Maintenance mode on so I can’t see how it looks right now. Can you share credentials inside a secure note?

Then please also share a screenshot on how you want it exactly.

Pro content builder and Cornerstone interface are the same. The header and footer builder is also easy to use. For detailed guidance, please subscribe and watch our youtube videos.

#5

I have attached the secure details, and if you visit www.crush-design.co.uk, that is similar to how I would like to see my logo displayed, about 200px wide and pushing each side of the menu?

Could you also please take a quick look at the “VIDEO” page for me (it will say “WE DO DESIGN” at the top), as the first paragraph appears to be aligning slightly off centre to the left and I can’t seem to figure out why?

#6

Hey @discomatt,

Thank you for providing us the credentials. To increase the space around the logo with the increase of it’s size, simply update your code with the following:

.the-logo {
    background: url(http://www.pummieproductions.co.uk/wp-content/uploads/2020/01/pummienobkg.png) no-repeat center center;
    background-size: 200px auto;
    min-width: 200px;
}
  • On your video page, you’ve added the Classic Row which is causing the issue, to keep the page consistent, use the Row instead of Classic Row.

Hope this helps!

#7

Hey Nabeel!

Thank you, that’s almost exactly what I wanted!
However, I now have the top and bottom of the logo seemingly cut off by the size of the nav bar?

Could you please help me with this last issue, and also, what to place in the menu bar so it’s just the logo? I cannot leave it blank otherwise the menu deletes the item. So it is currently " - - " ? Can I place HTML here to make the text transparent?

Many thanks for your help!

#8

Nevermind, I upgraded to pro and I’m using the header builder, exactly what I needed! Thanks!

#9

Hey @discomatt,

It’s good to know that you have upgraded to Pro theme. For more tips, tricks and how to videos, please do not forget to check out our channel:

Subscribe to our channel for more updates, tips and how to videos.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.