В настоящее время я пишу отзывчивую навигационную панель, однако меня беспокоит две вещи, которые я не могу понять. Любая помощь будет оценена:
1 / С моим оригинальным изображением логотипа, которое я использовал, у меня есть навигационные ссылки, чтобы выровнять его (как своего рода экранный блок), но я заметил только линии в полноэкранном режиме, поскольку вы минимизируете экран связывает кластер ссылок внизу и затем в конечном счете исчезает, когда экран действительно маленький и появляется переключатель. Как вы можете решить эту проблему.
2 / Я не могу скрыть значки от ссылок в полноэкранном режиме, но я сделал отображение: ни один в кодировке
Мой html-код:
<!DOCTYPE html>
<html>
<head>
<title>nav bar</title>
<link rel="stylesheet" type="text/css" href="CSS/style.CSS">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><a href=""><i class="fa fa-home site-nav--icon"></i>Home</a></li>
<li><a href=""><i class="fa fa-info site-nav--icon"></i>About us</a></li>
<li><a href=""><i class="fa fa-bus site-nav--icon"></i>blogger</a></li>
<li><a href=""><i class="fa fa-envelope site-nav--icon"></i>Contact</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery- ui.min.js"></script>
<script type="text/javascript">
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
Мой CSS пока:
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header{
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1{
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left:0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background:#802CED;
color: #000000;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align:right;
color: rgba(185,153,2,1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right:1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background:#000000;
height: 3px;
width:1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
@media (min-width: 700px) {
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background:transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border:none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus{
background:transparent;
}
.site-nav--icon {
display: none;
}
}