how to reduce the height of the navigation bar in css - html

Question

I'm trying to reduce the height of my navigation bar. when I use min-height property, it adds a scrollbar to the navigation bar which makes it not so appealing. I would like to align the logo to the extreme left and the rest of the contents to the extreme right.I have attached the code below. Please help me to fix it.
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
text-align: right;
top: 0;
margin: 0 auto;
right: 0;
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoraton: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>

Answer 1

your logo and below that your menu list - that's the problem
make its side by side
.navigation ul {
display: flex;
}
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
/*text-align: left;*/
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.navigation ul {
display: flex; /* new line added */
}
#logo {
flex: 2; /* new line added */
}
.log {
/*text-align: right;*/
top: 0;
margin: 0 auto;
right: 0;
display: flex; /* new line added */
flex: 8; /* new line added */
justify-content: flex-end; /* new line added */
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>

Answer 2

You had the scroll bar because the contents were too big and you had overflow-y: auto; Overflow controls the behavior when the contents are too big for the parent div size.
The float property can be used to move elements to different sides of the viewer in a consistent manner.
Your code is still not responsive and will not display correctly on screens smaller that 365px wide. The support range will get smaller if you add more menu items.
There are a lot of resources you can check out for making a responsive menu
Is this what you wanted?
body {
margin: 0 auto;
padding: 0
}
.navigation {
background-color: rgba(15, 58, 114, 0.9);
position: fixed;
height: 60px;
line-height: 60px; /* needs to be the same height as your navigation div */
top: 0;
width: 100%;
z-index: 10000;
}
.log {
float: right; /* pulls the div to the right side */
}
ul {
padding: 0;
margin: 0 auto;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 0 auto;
text-transform: uppercase;
}
li a {
color: White;
text-align: Center;
padding: 0 10px;
text-decoration: none;
}
li a:hover {
color:wheat;
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 10px;
float: left; /* pulls the div to the left side */
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>

Answer 3

made Changes to your HTML and CSS
div with class log is a block level element, means it occupies 100% width of the page, make them display:inline-block and float it to right, make the logo wrap in a div and float it to left. since we are having two float elements navigation bar height gets collapsed to avoid it we need to add clearfix
HTML
<div class="navigation clearfix">
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li>LOGIN</li>
<li>JOIN WITH US</li>
</ul>
</div>
</div>
CSS
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.logo{
float:left;
display:inline-block;
}
.logo a{
padding:8px 2px;
color:#fff;
display:block;
}
.menu{
float:right;
}
.clearfix::after{
content:"";
display:table;
width:100%;
}
.menu ul{
padding:0px;
list-style-type:none;
margin:0;
}
.menu ul li{
display:inline-block;
}
.menu ul li a{
color:#fff;
padding:8px 2px;
display:block;
}
Link For reference
style accordingly
hope this helps..

Answer 4

I've done a little change in the style:
.navigation {
background-color: rgba(15, 58, 114, 0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
margin: 0 auto;
float: right;
}
ul {
padding: 0;
}
li {
color: White;
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
float: right;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
float: left !important;
margin-top: -10px;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>