How to change the height of the mobile top bar?

Posted in: Newspaper
Post count: 11
Juan
#227776
Apr 10, 2018 at 7:44 pm

Hello team. First of all, you guys made an amazing job with this theme. It is fast, full of features and the support here is amazing. Thank you!

OK, so I’m currently using Newspaper 8 (Latest version) on my website. I would like to make the mobile top bar a little bit smaller.

This is the default mobile header (Not mobile theme)
https://imgur.com/zWf2TTC

And this is what I would like it to be (If possible)
https://imgur.com/K8aeQgn

If you also notice on the second image above which I photoshop, the menu and search icons are moved a little bit towards the left and right edges so I would also like to do this, if possible.

I didn’t see a setting for these in the Theme panel but if there is, please point me in the right direction. If, it can only be done using CSS code, could you please provide me with the code needed?

Thank you for your time.
Juan.

  • This topic was modified 8 years by Juan.
Post count: 22421
Bogdan B.
#227895
Apr 11, 2018 at 11:15 am

Hello Juan,
Thank you for your appreciation. You can try adding this css code in your theme panel-> custom code section: 

@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{
    height: 40px !important;
}
#td-top-mobile-toggle i, .header-search-wrap .td-icon-search{
line-height:42px;
}
#td-top-mobile-toggle i{
    width: 40px;
}
#td-top-mobile-toggle i, .header-search-wrap .td-icon-search{
width: 40px;
}
}

You can change the values in the code to your preference.

Thank you!

Post count: 11
Juan
#228020
Apr 11, 2018 at 7:23 pm

Thank you, Bogdan. It worked perfectly.

Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.