Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to enlarge header white strip and logo

Featured Lock Resolved Task
Hi,

I want to increase the size of the logo and also of the white strip of the menus in order to maintain a correct edging.

I inspected the code and did various tests but I could not figure out what to change. Thanks for your help.

Regards, Luca

Attachments (1)

  • Cattura.JPG
    Cattura.JPG 171.9 KB

16 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your access. Please use this css into your custom css to increase your logo size.

@media only screen and (min-width: 425px) {
.logo img {
max-width: 400px;
}
}



-Best Regards

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Would you please share your site url here? That would help to solve your issue easily.
Also you can use this css into your custom css to check if that solves your issue or not.

#sp-header {
height: 100px !important;
display: flex !important;
align-items: center !important;
}


Here is the custom css field https://prnt.sc/ijudw8

-Best Regards

Tabassum - Staff

More than a month ago #Permalink
Hey there! Thanks for your query.


1. Increase logo size:


#sp-header .logo a {
height: 200px;
}


2. Increase header size:


#sp-header {
height: 80px;
}


Also, you can use 3+9 for header column size.


Thank you.

Attachments (1)

  • 3+9.png
    3+9.png 7.8 KB

bmbsoluzioni

More than a month ago #Permalink
Hi,
Thanks for your query. Would you please share your site url here? That would help to solve your issue easily.
Also you can use this css into your custom css to check if that solves your issue or not.

#sp-header {
height: 100px !important;
display: flex !important;
align-items: center !important;
}


Here is the custom css field https://prnt.sc/ijudw8

-Best Regards


Thank you for reply, the header is now ok!
Can you give me the code in order to enlarge the logo?
Again...I tried some codes without result :(

Regards, Luca

Attachments (1)

  • Cattura.JPG
    Cattura.JPG 153.4 KB

bmbsoluzioni

More than a month ago #Permalink
Hey there! Thanks for your query.


1. Increase logo size:


#sp-header .logo a {
height: 200px;
}


2. Increase header size:


#sp-header {
height: 80px;
}


Also, you can use 3+9 for header column size.


Thank you.



Hi Tabassum,
thank you for reply. Unfortunately the code doesn't work...is there a chance to write down here my credentials visible only for moderators?

Thank you for your help

Regards, Luca

Tabassum - Staff

More than a month ago #Permalink
Hey Luca!

Please give me your site access via PM.


Thank you.

Pavel

More than a month ago #Permalink
Increase logo size:


.logo-image {
height: your_value;
}

or (the best way)

.logo img {
width: your_value;
height: auto;
}

Sifat - Staff

More than a month ago #Permalink

Can you give me the code in order to enlarge the logo?

Would you please share your site url here?

bmbsoluzioni

More than a month ago #Permalink

Can you give me the code in order to enlarge the logo?

Would you please share your site url here?


https://www.istitutodermacademy.it/

Sifat - Staff

More than a month ago #Permalink
Would you please PM me the access? It's showing me this http://prntscr.com/mszmpn

bmbsoluzioni

More than a month ago #Permalink
Would you please PM me the access? It's showing me this http://prntscr.com/mszmpn


Sent in pm.

Regards, Luca

bmbsoluzioni

More than a month ago #Permalink
Hi,
Thanks for your access. Please use this css into your custom css to increase your logo size.

@media only screen and (min-width: 425px) {
.logo img {
max-width: 400px;
}
}



-Best Regards


It works perfectly, thank you Sifat!

Did you use fire bugs inspector? Because I couldn't find ".logo img" with my browser :(

Regards, Luca

Pavel

More than a month ago #Permalink
Did you use fire bugs inspector? Because I couldn't find ".logo img" with my browser

Selectors can not only be found in existing ones, but also create their own custom ones based on existing html code. This is a created selector. You cannot find it in the inspector. Learn css

bmbsoluzioni

More than a month ago #Permalink
Did you use fire bugs inspector? Because I couldn't find ".logo img" with my browser

Selectors can not only be found in existing ones, but also create their own custom ones based on existing html code. This is a created selector. You cannot find it in the inspector. Learn css


I understand, thank you Pavel.

Regards, Luca

Sifat - Staff

More than a month ago #Permalink
You are always welcome :)


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 146
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 87
Toufiq

Toufiq

Total Accepted Answers: 25
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289440

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us