Как удалить границу кнопки гамбургера CSS и пространство над ней

Athanasios

Привет, ребята,

Я пробовал это какое-то время, но никуда не могу пойти.

Я обращаюсь за помощью к вам здесь. Вот код:

 <!DOCTYPE html>


<html><head>


<meta charset="UTF-8">


<title>How the hell to do this?</title>


<style>


html, body {


padding: 0;


margin: 0;


}


.bar {


width: 100%;


padding: 0.3em 0;


text-align: center;


background: rgba(101,101,101,1.0);


}


.nav {


display: inline-block;


padding: 0.3em 0.5em;


text-align: center;


border-radius: 2em;


border-left: 0.08em solid #555;


border-right: 0.08em solid #555;


-webkit-box-shadow: 0 0 0.2em #888;


-moz-box-shadow: 0 0 0.2em #888;


box-shadow: 0 0 0.2em #888;


}


.nav:last-child {


display: inline-block;


padding: none;


}


.nav a:active, .nav a:visited { color: #BBB; }


.nav a:hover { color: #FFF; }


.nav:nth-of-type(2) {


margin-left: 0.3em;


margin-right: 0.3em;


}


.hamburger {


position: relative;


font-size: .6em;


width: 3.3em;


height: 3.3em;


background: #555;


bottom: -1.7em;


}


.hamburger:before {


border-top: 0.3em solid #efefef;


content: "";


position: absolute;


width: 1.9em;


height: 1em;


border-bottom: 0.3em solid #efefef;


top: 1em;


left: 0.7em;


}


.hamburger:after {


content: "";


position: absolute;


top: 1.6em;


width: 1.9em;


height: 0.3em;


background: #efefef;


left: 0.7em;


}


</style>


</head><body>


<div class=bar>


<ul>


<li class=nav>


<a href='#' title='Коробка 1'>Box 1</a>


</li>


<li class=nav>


<a href='#' title='Коробка 2'>Box 2</a>


</li>


<li class=nav>


<a href='#' title='Параметр'><div class=hamburger></div></a>


</li>


</ul>


</div>


</body></html>

Код (разметка): Я хочу выровнять кнопку CSS в соответствии с другими кнопками на панели навигации, но все идет не так, как планировалось. Поскольку он может использовать только CSS, я не хочу использовать для этой работы изображение. Как я могу получить то, что хочу. Спасибо,

Mysims2go

Привет! Вы можете просто загрузить Font Awesome с CDN... это избавит вас от многих проблем с CSS.

 <!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>How to do this</title>


<link rel="stylesheet" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2ZvbnQtYXdlc29tZS80LjUuMC9jc3MvZm9udC1hd2Vzb21lLm1pbip1m']https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css[/URL]">


<style>


html, body{ padding:0; margin:0; border:0; }


.bar{ width:100%; padding:0.3em 0; text-align:center; background:rgba(101,101,101,1.0); }


.bar a{ color:#fff; }


/* DO YOUR BOX STYLING HERE */


.nav{ display:inline-block; padding:10px; border:1px solid #555; }


</style>


</head>


<body>


<h1>YOU CAN LOAD FONT AWESOME OFF THE CDN</h1>






<a href="[URL='https://lumtu.com/yti/cgbbgcy9odHRwczovL2ZvcnRhd2Vzb21lLmdpdGh1Yi5pby9Gb250LUF3ZXNvbWUvaWNvWav']https://fortawesome.github.io/Font-Awesome/icons/[/URL]" target="_blank">[URL='https://lumtu.com/yti/cgbbgcy9odHRwczovL2ZvcnRhd2Vzb21lLmdpdGh1Yi5pby9Gb250LUF3ZXNvbWUvaWNvWav']https://fortawesome.github.io/Font-Awesome/icons/[/URL]</a>


<br/><br/>


<div class="bar">


<div class="nav">


<a href='#' title='Коробка 1'>Box 1</a>


</div>


<div class="nav">


<a href='#' title='Коробка 2'>Box 2</a>


</div>


<div class="nav">


<a href='#' title='Параметр'><i class="fa fa-bars fa-lg"></i></a>


</div>


</div>


</body>


</html>

HTML:

Похожие темы	Дата
Ищу дизайнеров с Читы	19.10.2024, 18:10
Где найти фото сноубордистов?	19.10.2024, 18:10
Вы заинтересованы в новом способе монетизации своего блога?	19.10.2024, 18:10
Как исключить категорию из get_the_category?	19.10.2024, 18:10
Вопрос на странице пользовательских сообщений WordPress	19.10.2024, 18:10
Какую часть кода AdSense удалить	19.10.2024, 18:10
Как отобразить только членов определенной группы?	19.10.2024, 18:10
Вопрос о странице WordPress function.php	19.10.2024, 18:10
смертельная тень. . . Очередная попытка с нуля. . . Помогите пожалуйста	19.10.2024, 18:10
HTML-элемент выбора с настраиваемой стрелкой — текст появляется над стрелкой	19.10.2024, 18:10

Как удалить границу кнопки гамбургера CSS и пространство над ней

Athanasios

Mysims2go

I AM

Интересно