#menu .mainnav {display: inline-block;margin: 0 auto;padding: 0 30px;max-height: 50px;overflow: hidden;background: #ff8c00;border: 2px solid #fff;border-top: 0;-webkit-border-radius: 0px 0px 30px 30px;-moz-border-radius: 0px 0px 30px 30px;border-radius: 0px 0px 30px 30px;list-style: none;}
Замените его на:
#menu .mainnav {display: inline-block;margin: 0;padding: 0 30px;max-height: 50px;overflow: hidden;background: #d8bfd8;list-style: none;}
И добавьте в самый конец шаблона код:
@media all and (min-width: 991px) { #mommenu {background: #d8bfd8;} .header_menu {display: flex;} #catalog {flex-shrink: 0;} #custommenu {position: absolute;z-index: 9;} #catalog {display: block;z-index: 9;} .header_box {background: thistle;height: 100px;} #menu .mainnav {background: #d8bfd8;} }
В Редакторе шаблонов---HTML, найдите код:
<!-- Меню --> <div id="menu"> <div class="container"> <div class="inner"> <ul class="mainnav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> </div> <!-- /END Меню --> <!-- Каталог --> <div id="catalog"> <div id="mommenu"> <i class="icon-burger"><span></span><span></span><span></span><span></span></i> <label class="title">Каталог товаров</label> </div> <div id="custommenu"> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% IFNOT catalog_full_empty %} {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.ISSET_VISIBLE_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT%}active{% ENDIF %}" data-id="{catalog_full.ID}"> <a href="{catalog_full.URL}" class="title {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}" itemprop="url">{% IF catalog_full.ISSET_VISIBLE_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}<span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> <!-- /END Каталог -->
Замените его на:
<div class="header_box"> <div class="container"> <div class="header_menu"> <!-- Каталог --> <div id="catalog"> <div id="mommenu"> <i class="icon-burger"><span></span><span></span><span></span><span></span></i> <label class="title">Каталог товаров</label> </div> <div id="custommenu"> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% IFNOT catalog_full_empty %} {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.ISSET_VISIBLE_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT%}active{% ENDIF %}" data-id="{catalog_full.ID}"> <a href="{catalog_full.URL}" class="title {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}" itemprop="url">{% IF catalog_full.ISSET_VISIBLE_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}<span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> <!-- /END Каталог --> <!-- Меню --> <div id="menu"> <div class="container"> <div class="inner"> <ul class="mainnav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> </div> <!-- /END Меню --> </div> </div> </div>