Пункт меню «Гамбургер» сворачивается в 2 строки

Я создал веб-сайт Wordpress с гамбургер-меню для мобильных устройств. Вот HTML-код меню:

<div class="elementor elementor-1303 elementor-type-section">
    <div class="elementor-inner">
        <div class="elementor-section-wrap">
            <section data-id="84451c8" class="elementor-element elementor-element-84451c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-element_type="section">
                <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-row">
                        <div data-id="32037fc" class="elementor-element elementor-element-32037fc elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
                            <div class="elementor-column-wrap elementor-element-populated">
                                <div class="elementor-widget-wrap">
                                    <div data-id="01cf21a" class="elementor-element elementor-element-01cf21a elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                                        <div class="elementor-widget-container">
                                            <div class="elementor-spacer">
                                                <div class="elementor-spacer-inner"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section data-id="70032df" class="elementor-element elementor-element-70032df elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;}}" data-element_type="section">
                <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-row">
                        <div data-id="14d0f8d4" class="elementor-element elementor-element-14d0f8d4 elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
                            <div class="elementor-column-wrap elementor-element-populated">
                                <div class="elementor-widget-wrap">
                                    <div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                                        <div class="elementor-widget-container">
                                            <h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 400;"></span><p></p></a></h4>
                                        </div>
                                    </div>
                                    <div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                                        <div class="elementor-widget-container">
                                            <h4 class="elementor-heading-title elementor-size-default"><a href="#maya-about-mobile"><span class="menu-item-text"><span align="center">?אודות</span></span></a></h4>
                                        </div>
                                    </div>
                                    <div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                                        <div class="elementor-widget-container">
                                            <h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4>
                                        </div>
                                    </div>
                                    <div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                                        <div class="elementor-widget-container">
                                            <h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4>
                                        </div>
                                    </div>
                                    <div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                                        <div class="elementor-widget-container">
                                            <h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4>
                                        </div>
                                    </div>
                                    <section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
                                        <div class="elementor-container elementor-column-gap-default">
                                            <div class="elementor-row">
                                                <div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
                                                    <div class="elementor-column-wrap elementor-element-populated">
                                                        <div class="elementor-widget-wrap">
                                                            <div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
                                                                <div class="elementor-widget-container">
                                                                    <div class="elementor-text-editor elementor-clearfix">
                                                                        <p style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;<img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|&nbsp;<a style="color: #001a71;" href="tel:052-6582643" data-mce-fragment="1">&nbsp;052-6582643</a></label></p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

Мне удалось центрировать все в меню, но я не могу сделать так, чтобы значки и номер телефона в нижней части меню оставались в одной строке и не ломались. Я также хочу отредактировать его отступы, но это не работает для меня.

Вот CSS меню:

.menu-item-text-mobile {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11px solid transparent; 
border-top: 2.11px solid transparent; 
margin-left:50px;
}


#who-menu-mobile:hover .menu-item-text, 
#who-menu-mobile:focus .menu-item-text, 
#who-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}
#solutions-menu-mobile:hover .menu-item-text, 
#solutions-menu-mobile:focus .menu-item-text, 
#solutions-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#regulation-menu-mobile:hover .menu-item-text, 
#regulation-menu-mobile:focus .menu-item-text, 
#regulation-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; }

 @media(min-width: 300px) and (max-width: 749px){ .elementor-widget-heading .elementor-heading-title > a{ justify-content: center !important; display: flex !important;
 }}

Я хочу, чтобы нижняя часть меню выглядела так:

и здесь вы можете увидеть сайт в реальном времени: www.mayabarber.co.il

Я использовал живой конструктор, поэтому HTML-код создается конструктором, а не написанным мной. Поэтому я думаю, что решение должно быть либо решением CSS, либо решением jQuery.

Большое спасибо!


person Rozi Buber    schedule 20.06.2018    source источник
comment
Он уже похож на тот, который вам нужен.   -  person m4n0    schedule 20.06.2018
comment
Да, я решил это, изменив ‹a style=....› на ‹span style=...› Просто любопытно, почему a сделал разрыв строки.   -  person Rozi Buber    schedule 20.06.2018
comment
Вы можете просто ответить на свой вопрос и отметить его решенным.   -  person m4n0    schedule 20.06.2018
comment
Спасибо, я только что сделал. Также спасибо за желание помочь. :-)   -  person Rozi Buber    schedule 20.06.2018
comment
Удачи :) Я надеюсь, что будет больше вопросов, связанных с вашим сайтом: P   -  person m4n0    schedule 20.06.2018
comment
Ха-ха, только что опубликовал сообщение о браузере Edge. Я прохожу здесь процесс обучения. :-) – Рози Бубер 37 минут назад   -  person Rozi Buber    schedule 20.06.2018


Ответы (1)


Нашел способ решить эту проблему, изменив HTML с <a style=....> на <span style=...>.

person Rozi Buber    schedule 20.06.2018