Hello!
We are having a bit of a problem with our menu. When it´s displayed on a normal screen (wide enough to fit the whole page) this how it looks like: http://imgur.com/r3sGJbg
However, this is what happens when the page is displayed on a smaller screen: http://imgur.com/e9RXM8y
Is there a way of avoiding it? And also, is there any way of changing the place of that magnifying glass? It´s way too towards the right of the menu…
Thanks!
Hi,
This happens because there is no room for the menu items to display on a singe row. Please provide a link to your website if possible, so we can inspect it and try to give you a solution for this and also some more information about how you want to modify the search icon position.
Thanks
Hi,
The website is on maintenance mode but I´ve created a test account (with subscribe rights) you can use to log in and to see it:
goo.gl/796lyo
User: Test
Pwd: TEST.123
Thanks!
Hi,
The only solution to this at the present time would be to use this custom css code that will reduce the padding left/right and the inner padding between the menu items, also the width of the search icon, enter it in Theme panel->Custom Css
.td-header-style-10 .td-header-main-menu {
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 1018px) and (min-width: 768px) {
.sf-menu > li > a {
padding: 0px 5px;
}
.header-search-wrap .td-icon-search {
width: 24px;
}}
This is the result with the code, at the lowest width before the mobile toggle appears – https://www.screencast.com/t/zdbidTmCW
However if you add more menu items in the header menu, this will probably not work anymore because there will be no way to display more items in that amount of space that is available.
Thanks
Hi,
