Responsive Header

[alexanderlyons]

I have seen this brought up in a few threads but with not much of a solution. I have two issues with the header of our site https://iheartprinciples.com ;

1. As the menu is built in bootstrap, its defaulting onto a new line on tablets/ipads. If the text can't be responsive could we at least activate the mobile menu on the medium/small bootstrap sizes?

2. On a ipad/tablet the header becomes very deep, taking up 1/3 of the screen.

I have already reduced menu items, size of text in header

[logan]

Hey, try these codes in your wp-admin > appearance > customize > custom css > paste. @media (min-width: 992px) and (max-width: 1052px) { header.sleek.fix nav.menu-new-main-container {margin-bottom: -100px !important; margin-top: -20px !important;}} **it will remove the extra spaces in tablet mode only. refer: http://prntscr.com/lhsla1

[alexanderlyons]

Great thank you very much that works. Is there a way to change the font size on a smaller screen size too?

[logan]

Hey, Glad to know that worked for you. we do not have any setting for that yet. if you want to change font of any specific area we can provide you the custom css. Regards.

[alexanderlyons]

So you can provide css for header font size on a specific screen size?

[logan]

yes it is possible. we can control font-size look different on different devices.  

[alexanderlyons]

So could you provide css code to change the header font size to 10 on the following screen sizes 1024 x 768 1112 x 834 Thanks for your continued support

[logan]

Hey, Please goto wp-admin > appearance > customize > custom css > paste this code in the editor. @media (min-width: 768px) and (max-width:1112px){nav.menu-new-main-container ul#menu-new-main li.menu-item>a>strong{font-size: 10px !important;} Hope this helps.

[alexanderlyons]

Thank you that is perfect!

[logan]

cheers :) happy to help you. closing this topic. Never hesitate to ask again.  

[Author]

Posts