How can I make the header logo bigger and add text - Forum | JoomShaper
Solved Helix Framework

How can I make the header logo bigger and add text

Asked by chris wilhelms 4 years ago Last activity 4 years ago

The logo spot makes the logo small and distorted, how can that be made bigger?

also how can I add text After the logo.

example:
LOGO->Website Name

Image below showing what I mean with the logo and title.

Accepted answer

Marked as the solution
Rashida Rahman Staff
4 years ago

Hi there!

Thanks for your query.

You can control your logo height from the basic tab of your Template Options. Here is a sample screenshot for your ease: https://prnt.sc/fTyRJOd0oS4R

If you want it with custom code, then here is the code you need to put in yout custom CSS:

.logo-image {
    height: 150px !important;
}

If you want you can publish a module with your desired text in the logo position. You can do this with CSS either:

#sp-header .logo a:after {
    content: "Website Name";
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Hope this helps!

Best Regards

2 more replies

Oldest first Newest first Most helpful
chris wilhelms Asked this
4 years ago

I must have had a typo as i tried that but now it works(dekstop only) it doesnt make the logo any bigger on mobile or tablets

cool thanks.

now i just need to center the text on the logo as it rides near the top of the logo.

Rashida Rahman Staff
4 years ago

Hi,

No issues:)

You are using different image for your smaller devices and it is set as 36px. Here is a screenshot: https://prnt.sc/4Mc9EGLKPQa9 . So, it has different class name. You can use the following code. then:

.logo-image-phone {
    height: 50px;
}

You need to adjust your helight value as per your need.

Moreover, your header height is reduced to 50 px for smaller devices: https://prnt.sc/X9Z4V72-J9zK, hence you need to use media query to adjust your header height accordingly.

@media (max-width: 991px){
#sp-header {
    height: 50px;
}
}

Best Regards

Log in to reply.