How to control the size of the site logo of Goran Theme

Hey there gary yap,

Hope you’re well today!

This could be done with some custom CSS. Try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

.site-logo {
margin: 0 auto;
width: 314px;
height: auto;
}

The first property will remove top and bottom margins from the logo which will resize the header. If that is not enough and you want it smaller you can reduce the width of the logo by changing the numeric value in width property.

You can also re position the navigation by adding the top margin to it. Please add the following code:

.menu-primary {
margin-top: 40px;
}

This will align it with the logo if you remove only the margin from the logo given in the code above. Feel free to change the numeric value to move it up and down.

Hope this helps ??

Best regards,
Bojan

Hey, really thanks for the reply. I go to Appearance -> Editor – > Style.CSS

I tried to change some value as you suggested but in vain, because there are few lines stating about site-logo and also menu-primary, do I need to edit the existing one or just add the codes that you posted? Sorry, I am really new to CSS coding

Here is the CSS codes under header section:

/* Header */
.site-top-content {
padding: 6px 24px;
background: #403f3f;
font-size: 0.875em;
line-height: 1.71429em;
text-align: right;
}
.site-header {
background: #b23d3c;
color: #fff;
}
.site-logo {
display: block;
margin: 0 auto;
width: 314px;
max-height: auto;
}
.site-description,
.site-title {
text-align: center;
}
.site-description {
display: none;
margin-top: -14px;
margin-bottom: 24px;
color: #757575;
font-weight: normal;
font-size: 0.875em;
line-height: 1.71429em;
}
.site-title {
margin-top: 24px;
padding-bottom: 13px;
color: inherit;
}
.site-title a,
.site-title a:hover,
.site-title a:focus,
.site-title a:active {
color: inherit;
}
.header-image {
display: block;
}
.header-image img {
display: block;
margin: 0 auto;
width: 100%;
}

/* Content */
.site-content {
position: relative;
background: #fff;
}
.breadcrumbs-wrapper {
padding-top: 24px;
padding-bottom: 24px;
background: #f1f0f0;
}
.entry-breadcrumbs a {
position: relative;
margin-right: 20px;
}
.entry-breadcrumbs a:after {
content: ”;
display: block;
position: absolute;
top: 50%;
right: -12px;
margin-top: -4px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #242424;
}

/* Featured Page Area */
.has-quinary .featured-page-area {
position: relative;
border-bottom: 2px solid #d2cfcf;
}

/* Grid Area */
.content-wrapper + .grid-area {
border-top: 2px solid #d2cfcf;
}

/* Footer Widget Area */
.footer-widget-area {
background: #f1f0f0;
}

/* Footer */
.site-footer {
background: #403f3f;
font-size: 0.875em;
line-height: 1.71429em;
}
.site-info {
padding: 24px 0;
}

what do you think?

Hi again gary yap,

You can edit the lines or add the code at the end of your theme style.css but I wouldn’t suggest that because once you update the theme your changes will be lost and you can’t really keep track of the modifications you made.

Since you’re not familiar with the CSS coding I would say the easiest way to add the code would be to install this plugin:

https://www.ads-software.com/plugins/simple-custom-css

Once the plugin is installed and activated you can add the code to Appearance >> Custom CSS https://screencast.com/t/rsnhispIu.

Hope this makes sense.

Best regards,
Bojan

WOOHOO, THANK YOU VERY MUCH! I HAVE BEEN FIGURING THIS SOLUTION FOR FEW DAYS AND WITH YOUR ADVICES, I MADE IT! THANK YOU

Hey there,

Glad I could help ??

Cheers,
Bojan

Cheers!

Hello,

My question is similar, but I do not wish to change the size of the part of the header that holds the website name/logo, but the size of the part where page names appear.

For example, my homepage looks fine, but the About page has a second band under the logo band which just reads ‘About’ and takes up as much space as the logo band. What do I need to do to reduce its height?

Thank you

Hey there eikosiduo,

How are you today?

In order to achieve this you’ll have to reduce the padding around the page title. Please try adding the following CSS code as explained in above:

@media screen and (min-width: 1020px) {
.hero {
padding-top: 72px;
padding-bottom: 72px;
}
}

Note that this is the original value of the top and bottom padding, please reduce it to what ever suits you the most ??

Since this is not the same problem that OP had I suggest in the future that you open your own thread for the sake of other members.

Hope this helps ??

Cheers,
Bojan