Как переместить кнопку меню (см. сайт)?

12
Mahol
На сайте с 20.11.2016
Offline
98
307

Всем доброго дня. Есть сайт на Вордпресс. 
На мобильной версии требуется все кнопки перенести в нижнее плавающее меню и если со ссылками всё понятно, то с меню сложнее. Как сделать ссылку на меню? Это делается через <button>?


jpg photo_2023-05-11_22-55-57.jpg
png 2023-05-13_08-07-32.png
JS
На сайте с 19.11.2020
Offline
97
#1

А зачем вы сделали нижнее меню? Вставьте нужные ссылки в верхнее меню и прилепите его снизу.

.nav_container {

background: #3FC1C1 ;
position: fixed;
bottom: 0;
top: auto;

777

Mahol
На сайте с 20.11.2016
Offline
98
#2
John Silver #:

А зачем вы сделали нижнее меню? Вставьте нужные ссылки в верхнее меню и прилепите его снизу.

.nav_container {

background: #3FC1C1 ;
position: fixed;
bottom: 0;
top: auto;


Да, действительно, так проще оказалось. 
В принципе, всё сделал, только не пойму, как стилями заставить "Меню" встать на одну линию с другими надписями. Пытаюсь через margin, почему-то ширина фона строки меняется...

png 1h3y.png
D
На сайте с 05.02.2022
Offline
37
#3
Mahol #:

Да, действительно, так проще оказалось. 
В принципе, всё сделал, только не пойму, как стилями заставить "Меню" встать на одну линию с другими надписями. Пытаюсь через margin, почему-то ширина фона строки меняется...

display flex

Mahol
На сайте с 20.11.2016
Offline
98
#4
Последний штрих - как сделать ссылкой иконку меню? То есть, чтобы боковое меню открывалось и по нажатию на "гамбургер".
S
На сайте с 01.12.2017
Offline
157
#5

top измените, пиксели подберите сами, чтобы выровнять 

.nav_container {

background: #3FC1C1 ;
position: fixed;
bottom: 0;
top: 10px;

Mahol
На сайте с 20.11.2016
Offline
98
#6
smurf #:

top измените, пиксели подберите сами, чтобы выровнять 

.nav_container {

background: #3FC1C1 ;
position: fixed;
bottom: 0;
top: 10px;

Вроде уже всё выровнял.
А как сделать ссылкой иконку меню?
JS
На сайте с 19.11.2020
Offline
97
#7

По хорошему все картинки иконок должны быть объединены в одном изображении и добавлены к пунктам меню через css.

Либо это...

<p style="margin: -53px 0px 0px 10px !important; position: absolute;"><a href=""><img style="margin: 0px 3px 0px 10px !important;" class="wp-image-10979" src="путь к изображению" alt="" width="30" height="30" i-amphtml-auto-lightbox-visited=""></a></p>

Заменить на это...

<div style="margin: -53px 0px 0px -7px !important; position: absolute; background:none" on="tap:sidebar.toggle" role="button" tabindex="0" class="nav_container"><a href="#"><img style="margin: 0px 3px 0px 10px !important;" class="wp-image-10979" src= "путь к изображению" alt="" width="30" height="30" i-amphtml-auto-lightbox-visited=""></a>

</div>


Либо вставляйте иконку туда где кнопка "меню" и выравнивайте стилями как вам надо...

<div on="tap:sidebar.toggle" role="button" tabindex="0" class="nav_container">
<a href="#" class="toggle-text">Меню<img src="путь к изображению" alt="" width="30" height="30"></a>
</div>
Mahol
На сайте с 20.11.2016
Offline
98
#8

Благодарю! Работает, только не понял, где иконка меню. Почему-то не отображается и не могу маржином добиться того, чтобы хотя б увидеть на экране телефона.


<div style="margin: 0px 0px 0px -7px !important; position: absolute; background:none" on="tap:sidebar.toggle" role="button" tabindex="0" class="nav_container"><a href="#"><img style="margin: 0px 3px 0px 10px !important;" class="wp-image-10979" src="путьккартинке" alt="" width="30" height="30" i-amphtml-auto-lightbox-visited=""></a>

</div>

Пробовал и z-index:10000 и margin: -200px 0px 0px 0px и position:absolute - бестолку.  

JS
На сайте с 19.11.2020
Offline
97
#9
Mahol #:

Благодарю! Работает, только не понял, где иконка меню. Почему-то не отображается и не могу маржином добиться того, чтобы хотя б увидеть на экране телефона.


<div style="margin: 0px 0px 0px -7px !important; position: absolute; background:none" on="tap:sidebar.toggle" role="button" tabindex="0" class="nav_container"><a href="#"><img style="margin: 0px 3px 0px 10px !important;" class="wp-image-10979" src="путьккартинке" alt="" width="30" height="30" i-amphtml-auto-lightbox-visited=""></a>

</div>

Пробовал и z-index:10000 и margin: -200px 0px 0px 0px и position:absolute - бестолку.  

А вы путь к иконке указали?)

Mahol
На сайте с 20.11.2016
Offline
98
#10
John Silver #:

А вы путь к иконке указали?)

Да

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий