How to increase size of logo?

Shapely
1

Hello all.

First off, an amazing theme. Thank you for developing this!

I am a total newbie when it comes to wordpress, so any help is much appreciated.
My question is, I have a logo that I need to put on website. I cannot edit the logo but can only play with its width and height.
When I put that logo, it appears very small. See attached image.

The current colorlib logo in shapely theme has “full height” letters. I cannot change the logo to reflect the same.
So how do I show my logo in bigger size?

I played with the css but it disturbs the mobile responsiveness (logo is partially visible when I resize the browser). If I increase height of the anchor tag for logo and the parent <div> tag, the menu is bottom aligned (it should be center aligned as per theme) and it breaks the nice flow of elements (becomes a mess!).

Hope you all get my issue.

Thanks.

Note:
This is what I did in my css uptil now, but this does not work 100%


.nav-bar .module, .nav-bar .module-group {
    height: 60px;
}

.nav-bar a {
    display: inline-block;
    height: 120px;
}

.logo {
    max-height: 100%;
    height: 120px;
}
2

Hi @pirate11,

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

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

img.logo {
    max-height: 100%;
}
#site-navigation .module.left, .nav-bar a {
    height: 100px;
}

Please change the height 100px in the above code to whatever you want to set.

Best Regards,
Movin

3

Hello Movin.

Thank you for your reply.

I applied your CSS in exactly the way you described. However, the size of logo only increases for desktop/laptop width screens.
If I resize my browser and make it the width of a mobile phone, then the logo is partially hidden. The menu also gets hidden. In short, it does not work.

I played around the main code and the CSS and I’ve finally got it working.
For anyone around looking to address this issue, please follow the below steps.

Note: This works only for my logo size, for your own logo size, you may need to tweak the values a bit.

Step 1:
In your website’s file manager (via CPanel), open the “extras.php” file. It should be under themes folder -> inc.
Goto line 540 (the <a> tag)
Add the “style” and the “class” as below:
<a style=‘height:125px’ class=‘alogo’ href="<?php echo esc_url( home_url( ‘/’ ) ); ?>"><?php
Save the file.

Step 2:
Goto Wordpress Admin Dashboard and Goto Appearance -> Edit CSS
Note: You have to open the wordpress theme CSS editor.
The theme’s editor which is at “Admin Area -> Appearance -> Customize -> Shapely Options -> Other” will NOT work (it didn’t work for me at least)

Step 3:
Paste the below CSS in the Editor


/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
img.logo {
	max-width: 370px;
	max-height: 125px;
	width: 100%;
}

.logo {
	max-height: 100%;
	height: auto;
}

.nav-bar {
/*height: 125px;*/
	max-height: 125px;
}

.nav-bar .module, .nav-bar .module-group {
	min-height: 125px;
}

#menu {
	margin-top: 36px;
}

.search-widget-handle > .search {
	margin-top: 34px;
}

.module.widget-handle.mobile-toggle.right {
	margin-top: 20px;
}

@media only screen and (max-width: 1170px) {
	/* For screens less than tablets and more than mobiles: This is specific to this theme and not a standard break-point value in CSS */

	#menu {
		margin-top: 18px;
	}
	
	img.logo {
		max-width: 276px;
		max-height: 75px;
		width: auto;
	}
	
	.alogo {
		height: 95px !important;
	}
	
	.nav-bar .module, .nav-bar .module-group {
		min-height: 75px;
	}
	
	.module-group.right {
		max-width: 610px;
		float: left;
	}
	
	.menu > li.dropdown {
		padding-right: 10px;
	}
	
	.menu > li {
		margin-right: 15px;
	}
}

@media only screen and (max-width: 450px) {
	/* For mobile phones: */
	img.logo {
		max-width: 250px;
		max-height: 84px;
		width: auto;
	}
	
	.alogo {
		height: 85px !important;
	}
	
	.module.left a {
		height: 35px;
	}
	
	.module.widget-handle.mobile-toggle.right {
		height: 35px;
	}
	
	.nav-bar .module, .nav-bar .module-group {
		min-height: 65px;
	}
	
	.nav-bar .module-group {
		padding-top: 0;
	}
}

Save Stylesheet. Refresh your website and you should see the logo resized. Resize your browser to see the logo getting resized along with the menu.
Note: This is not 100%, since I assume that my website will be viewed mostly on Desktops and Laptops.

Thank you.

4

Awesome great to see you got that achieved.

Please advise if you have more questions.

Have a fantastic day!

5

Hi Mod,

Is there anyway I can achieve the same results without the editions that pirate11 suggested?

I am a total noob so I do not want to tinker with things too much.

Is there anyway to just have it adjust with the screens?

Thank you.

6

Hi @shahidul,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin