Increasing width of text bar without moving other elements - html

Question

I am duplicating the Youtube navigation bar by using flexbox but when I came across the search bar It kept on moving the icons while I was trying to increase the width of the search bar.
I've tried position absolute and align self but it did not work.
* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
background-color: #f1f1f1;
}
.navigation {
height: 60px;
width: 100%;
box-shadow: 0px 10px 9px #eeeeee;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
}
.stack,
.icon {
width: 100px;
}
/* right corner of nav bar */
.menu {
position: relative;
right: 30px;
width: 23px;
opacity: .6;
}
.youtube-logo {
position: relative;
right: 130px;
width: 90px;
}
.search-bar {
position: relative;
left: 100px;
height: 30px;
}
<nav class="navigation">
<a href="#menu">
<img src="images/menu.svg" alt="menu for the top left, shaped like a hamburger" class="menu">
</a>
<a href="#logo">
<img src="images/youtube.logo.png" alt="youtube logo" class="youtube-logo">
</a>
<input type="text" name="searchbar" placeholder="Search" class="search-bar">
<a href="#video-icon">
<img src="images/video.svg" alt="video icon" class="video">
</a>
</nav>
I wanted the search bar to be the same exact width of YouTube's search bar without moving the other icons.

Answer 1

//you can used a ul li for fixed navbar and this very helpful to don't move other element in navbar
like this :
Navbar
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
// or use Bootstrap 4 very nice and easy

Answer 2

You're likely looking to use justify-content: space-between and then adjusting the flex property of the input bar. Flexbox items default to a value of flex: 0 1 auto (aka flex-grow: 0, flex-shrink: 1, flex-basis: auto). In this case, you want the input bar by default to grow and take up the rest of the available space in your flex container, so if you set its flex property to flex: 1 (equivalent to flex: 1 1 0) or set flex-grow: 1 you accomplish this.
justify-content: space-around evenly spaces each element, and the empty space before the first item and after the last item in the flex container is set to equal half the space between each adjacent item. Using justify-content: space-between forces the first and last item in the flex container to be flush respectively with the beginning and end of the flex container.
This way, you don't need to use position relative/ absolute (you shouldn't need to use either of these in a flex container anyway) and can use margins to better space between each element.
* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
background-color: #f1f1f1;
}
.navigation {
height: 60px;
box-shadow: 0px 10px 9px #eeeeee;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
}
.stack,
.icon {
width: 100px;
}
/* right corner of nav bar */
.menu {
width: 23px;
opacity: 0.6;
margin: 0 16px 0 0;
}
.youtube-logo {
width: 90px;
height: 40px;
}
.search-bar {
margin: 0 40px;
flex: 1;
}
<nav class="navigation">
<a href="#menu">
<img src="https://via.placeholder.com/23" alt="menu for the top left, shaped like a hamburger" class="menu">
</a>
<a href="#logo">
<img src="https://via.placeholder.com/190" alt="youtube logo" class="youtube-logo">
</a>
<input type="text" name="searchbar" placeholder="Search" class="search-bar">
<a href="#video-icon">
<img src="https://via.placeholder.com/40" alt="video icon" class="video">
</a>
</nav>
More on how justify-content values work: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
And more on the flex property: https://developer.mozilla.org/en-US/docs/Web/CSS/flex