Блог

Главная - Вопросы по программированию - Значок бургер-бара, отображающий только одну строку

Значок бургер-бара, отображающий только одну строку

#css #menu #elementor

Вопрос:

Я использую шаблон элемента, который отображает только строку меню гамбургера вместо трех.

Я пробовал одну или две вещи (например, псевдо-тень коробки), но это не работает.

Кто-нибудь может мне помочь? Я действительно в отчаянии, у меня крайний срок, и я не знаю, справлюсь ли я с этим.

Заранее большое спасибо!!!

HTML и CSS являются:

 .mean-container .mean-bar {
    box-sizing: content-box;
    float: left;
    width: 100%;
    position: relative;
    background: #0c1923;
    padding: 4px 0;
    min-height: 42px;
    z-index: 999999;
}
.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    margin-top: 3px;
} 
 <div class="mean-bar">
    <a href="#nav" class="meanmenu-reveal" style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;"><span><span><span></span></span></span></a>
    <nav class="mean-nav">

Ответ №1:

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

 body{
background:#000;
}
.mean-container .mean-bar {
    box-sizing: content-box;
    float: left;
    width: 100%;
    position: relative;
    background: #0c1923;
    padding: 4px 0;
    min-height: 42px;
    z-index: 999999;
}
.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    width:15px;
    margin-top: 3px;
} 
 <div class="mean-bar">
    <a href="#nav" class="meanmenu-reveal" style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;"><span></span><span></span><span></span></a>
    <nav class="mean-nav">

Комментарии:

1. Большое вам спасибо за то, что ответили мистеру Лентяю. Постараюсь это сделать.

2. К сожалению, это не сработало.

3. Мистер Лентяй. Это, наконец, помогло мне. Как вы точно определили проблему, я смог «атаковать» ее лучше. Все еще не решил эту проблему, но я буду продолжать пытаться.

4. Большое спасибо за ваше время.

5. @PatPadilla Это работает нормально в моем фрагменте кода. Но, как вы говорите, это не работает в вашем коде. Поэтому, пожалуйста, вставьте ссылку Jsfiddle вашего кода в комментарий.

Метки: ,