Hi,
I just wanted to see if you could please tell me how to increase the size of my logo when viewing on mobile devices? (I’m not using the mobile theme)
Screenshot: http://www.screencast.com/t/Qy71P1pUj
Hello lukehodge,
I cannot access your website URL because it seems that your website is in maintenance mode. I need your website to be live so I can take a closer look at it.
Thanks for your understanding!
Thanks Catalin, maintenance mode is now off at https://seemslegit.com.au/
Hello lukehodge,
You sohuld try using a bit of CSS code if you want to change the size of your logo.
The code is ->
@media (max-width: 1140px){
.td-main-menu-logo img {
max-width: 250px;
}
}
@media (max-width: 1140px){
.td-main-menu-logo img{
max-height: 60px!important;
}
}
Notice that we do not recommend to increase the size of that section because the logo can be easily broken. I suggest to load another logo size for the mobile version from Theme panel, clear all the caches and check the results. If you will check our demo, you will see good results in this case.
Thanks for your understanding!
Thanks for that.
With that code the the menu bar container is bleeding onto the grid below, as per:
http://www.screencast.com/t/ujsQgxDXI
Is it possible to increase the size of the menu bar container as well so that this doesn’t happen?
Is it also possible to increase the size of the logo quite a bit more than in the above example as increasing the values didn’t seem to increase the size after a certain point.
I also found a screenshot in another post: https://www.screencast.com/t/QV4urfiBC
Where the logo size and container seem quite a bit bigger, but I couldn’t figure out how to use it on my website. Ideally the menu bar container would be about the size it is in the above screenshot, but the logo would be almost the full height of the container.
Hello luke,
I have tried to access your website but no success because your website it seems to be in maintenance mode, sorry! Please, notice that we do not encourage to use such a Custom CSS code to increase the logo section because the theme layout could be more easily broken, sorry! Make sure that your logo size is according to our documentation because if you will check our demo preview you will see that the logo works as expected. Try to use our logo from Newspaper, take it from demo preview, add it to your website and check the results. Clear all the caches after this and see the results.
Thanks.
Apologies Catalin, maintenance mode is now off.
I understand it’s not something you encourage, but I still wanted to see if it’s possible to increase the logo size and menu bar container like in the screenshot at https://www.screencast.com/t/QV4urfiBC
But ideally for the logo to be almost the full height of the larger container as well?
Hi,
This code will increase the height of the mobile header, like this
– https://www.screencast.com/t/2OBzz0URu
It will remain the same size when sticky as well
– https://www.screencast.com/t/nJTTeiaXT
This is the code used
@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu, #td-header-menu {
height: 100px !important;
}
#td-top-mobile-toggle,
.header-search-wrap {
top: 23px;
}
.td-main-menu-logo img {
max-height:100px;
}
.td-header-menu-wrap.td-affix {
transform: translate3d(0px, 0px, 0px)!important;
}}
You may modify values if needed, or leave it as it is.
Thanks
Thanks Simion.
I implemented the code and it increased the container size, but the logo isn’t using close to the full height like it is in your screenshots.
Would it be possible to tell me how to get the mobile logo looking like it does in your screenshots or making that change to my website yourself? I’m very sorry but I can’t seem to figure it out.
Indeed, it seems I forgot one piece of the code, sorry. Enter this as well
@media (max-width: 1140px) {
.td-main-menu-logo img {
max-width: 100%;
}}
Hello. This codes are working for the Newsmag theme? I want to make the same thing.
Thanks,
Hi,
@kame Try something like this, see if it works properly for you
– https://www.screencast.com/t/xIdNFlH2Ut
– https://www.screencast.com/t/bmERGGn8byH
@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu, #td-header-menu {
height: 100px !important;
}
#td-top-mobile-toggle,
.header-search-wrap {
top: 23px;
}
.td-main-menu-logo img {
max-height:100px;
}
.td-header-main-menu.td-affix {
transform: translate3d(0px, 0px, 0px)!important;
}
.td-mobile-logo.td-sticky-mobile img{
max-height: 70px !important;
}}
Thanks
Hi, I’m using Newspaper now. I tried the code that you gave to lukehodge but doesn’t work. I made the container bigger. But I want the logo occupying the whole height.
image:
https://ibb.co/bC5Qk7
link:
https://www.kame.es
If you want the logo bigger, try this code:
@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu, #td-header-menu {
height: 100px !important;
}
#td-top-mobile-toggle,
.header-search-wrap {
top: 23px;
}
.td-main-menu-logo img {
max-height:100px;
}
.td-header-menu-wrap.td-affix {
transform: translate3d(0px, 0px, 0px)!important;
}
.td-header-style-6 .td-main-menu-logo img{
max-height: 100px;
}
}
Thank you!
