Issue
So I am trying to make the header part of my website and I had a few questions. Before I go into them I just want to say I am very new at this, so please do try and make it simple. Thanks. Ok so here they are:
- I want to have my text hovering next to my logo as you see on any other website.
- when you scroll down the header follows you so you don't have to scroll all the way up.
So here is the code i have for the first question, but i dont have nay for the second:
header {
width: 100%;
height: 5%;
background-color: #52bad5;
border-bottom: 1px solid #2C9AB7;
padding-top: 0px;
margin-top: 0px;
}<body>
<!-- Main Container -->
<div class="container">
<!-- Navigation -->
<header> <a href="">
<img src="file_locatio_here" alt="" width="50" height="50">
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li><a href="#hero">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li> <a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
</div>
</body>I hope that makes any sense at all.
Solution
To make the logo next to the text, all you need is to add display: flex to the wrapper, as seen below.
To make the header stick to the top, all you need to do is add position: sticky to it.
I'd advise reading more about flexbox here:
body {
height: 200vh;
margin: 0;
}
header {
width: 100%;
background-color: #52bad5;
border-bottom: 1px solid #2C9AB7;
position: sticky;
top: 0;
display: flex;
}
.wrapper {
display: flex;
}
ul {
display: flex;
}
li {
padding: 0 5px;
}<header>
<a class="wrapper">
<img src="file_locatio_here" width="50" height="50">
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li><a href="#hero">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li> <a href="#contact">CONTACT</a> </li>
</ul>
</nav>
</header>Answered By - barhatsor Answer Checked By - Pedro (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.