How I can move navbar onto img? - html

Question

I need to move navbar onto image. I've tried to set position: absolute; for navbar but it collapsed. How can I do this?
* {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat", sans-serif;
}
.global-padding {
padding: 0 98px;
}
.container {
width: 1172px;
margin: 0 auto;
}
.order-us-button {
display: inline-block;
width: 212px;
height: 45px;
text-align: center;
text-decoration: none;
letter-spacing: 3.6px;
text-transform: uppercase;
color: #212121;
border-radius: 23px;
background-color: #ffffff;
box-shadow: 0 2px 5px 1px rgba(33, 33, 33, 0.35);
font-size: 18px;
font-weight: 700;
line-height: 45px;
}
.navbar {
display: flex;
padding-top: 63px;
flex-wrap: wrap;
justify-content: space-between;
}
.navbar_fixed {
/* pass */
}
.navbar__logo-img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
.navbar__menu {
display: flex;
list-style: none;
}
.navbar__menu-link {
padding: 10px 13px;
text-decoration: none;
text-transform: uppercase;
color: #8c8c8c;
font-size: 14px;
font-weight: 300;
}
.navbar__menu-link_active {
letter-spacing: 1.4px;
color: #212121;
border-bottom: 3px solid #212121;
font-weight: 700;
}
.navbar__search {
padding: 0;
border: none;
background: none;
}
.navbar__search-icon {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
.slider__background-image {
width: 100vw;
height: 100vh;
}
.slider__text {
position: absolute;
}
.slider__status-text {
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
font-weight: 700;
}
.status-text_trending {
color: #43a047;
}
.slider__h2 {
text-transform: uppercase;
color: #212121;
font-size: 62px;
font-weight: 100;
line-height: 72px;
}
.slider__content {
width: 450px;
color: #6c6c6c;
font-size: 14px;
font-weight: 300;
line-height: 24px;
}
.slider__circle {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #c7c7c7;
}
.slider__circle_active {
width: 40px;
height: 40px;
background-color: #212121;
}
<div class="slider">
<nav class="navbar global-padding">
LOGO
<ul class="navbar__menu">
<li class="navbar__menu-item">HOME</li>
<li class="navbar__menu-item">PRODUCTS</li>
<li class="navbar__menu-item">HISTORY</li>
<li class="navbar__menu-item">SHOWROOM</li>
<li class="navbar__menu-item">CONTACT</li>
<button class="navbar__search"><img class="navbar__search-icon" src="{% static 'img/search.svg' %}" alt="Search"></button>
</ul>
</nav>
<img src="https://images.pexels.com/photos/1350789/pexels-photo-1350789.jpeg?cs=srgb&dl=two-assorted-color-padded-chairs-near-side-table-1350789.jpg&fm=jpg" alt="Slider image" class="slider__background-image">
</div>

Answer 1

You should rather set img to position: absolute instead of navbar. Keep in mind you'd need img's parent container to be set to position: relative.
Edit 1-
You might also need to set z-index for img if it blocks navbar from appearing.
Edit 2-
For the navbar going out of screen issue-
Use width: 100vw for nav element
Set flex-grow: .5 and flex-basis: 50% to ul in the nav element
Note- You can adjust the amount of flex-grow and flex-basis to whatever you want.

Answer 2

Your code have some serious problems which indicates lack of experience, and they are as follows-
1- why you want to specify image differently and position it onto navbar? Instead you can use background-image: url(''); property with the parent container and your desired result will be achieved.
2- If you want gap between logo and image then don't specify it with a particular margin. Kindly use float:right; for links and float: left; for your logo, then you can specify margins to any specific link just as you want it to be.
3- Kindly make us clear about your actual query and share the snippet of essential information only!
you should first make your code clear and up to the point, and then kindly specify your queries in details.

Answer 3

If you want an image in navbar?
add width="50px";
<img width="50px" alt="Search">

Answer 4

You also can set the Image as css Background image
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif
}
nav{
display: flex;
justify-content: space-between;
align-items: flex-start;
color: red;
background-image: url(https://images.pexels.com/photos/1350789/pexels-photo-1350789.jpeg?cs=srgb&dl=two-assorted-color-padded-chairs-near-side-table-1350789.jpg&fm=jpg);
height: 50vw;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: .5rem;
}
.nav-container a{margin: 0 .3rem; color: red}
<nav><h3>Company</h3><div class="nav-container">AboutHistoryPricing<div></nav>

Answer 5

Try this
<button class="navbar__search" style="background-image: url('your_image.jpg');">Search</button>
in your_image specify the image you wish to be displayed.
remove img tag and check it.