How to Change Logo Size

Shapely
1

Hi,

I am trying to increase the logo size. I have used the initial code suggested on this thread Link

This has helped with the desktop version but on the mobile and tablet version the logo does not appear correctly. It is being cut of by the navigation bar.

Is there anyway to have a fixed height for the desktop and auto-adjust the logo size on the tablet and mobile version.

As I have increased site-navigation height, the menu text aligned to the top does not look good. I have added top padding to bring it down but the arrow for the submenu stay at the top. is there anyway to also bring this down cleanly. All the elements of the menu I would like to be middle centered to the navigation bar.

Thank you

2

Hi @shahidul,

I hope you are well today and thank you for your questions.

You can try using the following custom CSS code to achieve this.

@media (min-width: 991px){
img.logo {
    max-height: 100%;
}
#site-navigation .module.left, 
.nav-bar .row > .module.left a {
    height: 100px;
    width: auto;
}

#site-navigation .module-group.right{
  margin-top: 22px;
}
}

Best Regards,
Movin

3

Hi Movin,

This has worked perfectly.

Thank you

4

You are most welcome here :slight_smile:

5

Hi.

@movin I’m having the same issue. I tried the fix you gave to shahidul and it didn’t work for me… my logo is pushed too high up and there is too much margin below. And on the Chrome browser it appears my menu disappeared:

6

image didn’t load on the last one

7

@playalovesme This is old topic and our theme is updated so the solution provided may not work for you.

Please create a separate topic here https://colorlibsupport.com/c/shapely/ for your question where we would be more than happy to help.