Good day, When I view my website on smaller screen devices such as a laptop, The navigation menu overlaps my Logo. is there a way I can move the navigation menu higher up on the header so to avoid overlap? Thanks
Sadly there is no such option to push the menu up.
I think the best solution to this, is make the logo smaller, on your screenshot it takes up more then 50% of the available width and there is not enough space for the menu. Reducing the logo size would prevent overlapping.
You can reduce the logo size in Theme Options -> Logo. There is a setting "Maximum Logo width and height". If you set its width to ie 300px, the logo won't take as much space.
If you want to keep it as large on large screens and just make it smaller on medium screens (laptops), you can paste this CSS snippet in Theme Options -> Custom CSS:
Good day, When I view my website on smaller screen devices such as a laptop, The navigation menu overlaps my Logo. is there a way I can move the navigation menu higher up on the header so to avoid overlap? Thanks
Hi Jared,
Sadly there is no such option to push the menu up.
I think the best solution to this, is make the logo smaller, on your screenshot it takes up more then 50% of the available width and there is not enough space for the menu. Reducing the logo size would prevent overlapping.
You can reduce the logo size in Theme Options -> Logo. There is a setting "Maximum Logo width and height". If you set its width to ie 300px, the logo won't take as much space.
If you want to keep it as large on large screens and just make it smaller on medium screens (laptops), you can paste this CSS snippet in Theme Options -> Custom CSS:
@media (min-width: 992px) and (max-width: 1199px) { .mainheader a.logo > img { max-width: 300px!important; } }It will reduce the logo size only for laptops.
I hope this helps,
Andrej
OrionThemes
Thank you so much for the quick and informative reply. I've made the changes.
Glad to hear it worked.
Kind regards,
Andrej
OrionThemes