Tips for resizing a navbar to match the image within it as the window size decreases

I'm having an issue with my navbar that contains both an image and a menu. Everything looks good when the window is maximized, but as soon as I start to resize it, the image and menu shrink while the navbar stays the same height.

I've tried using various options like percentages, vh, vw, and more, but nothing seems to solve the problem. Here's my code:

.main-bar {
  background-color: #212121;
  font-size: 1.5vw;
  color: #8a8a8d;
  font-family: sans-serif;
  display: inline-flex;
  width: 100%;
}

.imgs {
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 25px;
  margin-right: 30px;
  /* width: fit-content; */
  width: 700px;
  height: 110px;
}

.imgs img {
  width: 100%;
  height: auto;
}

.menu {
  width: 100%;
  margin-top: 45px;
}

#login {
  float: right;
  margin-right: 2vw;
  margin-top: -10px;
}

.menu_item {
  padding: 10px;
}

.menu_item:hover,
.login:hover {
  color: #E3E3E3;
  cursor: pointer;
}
<div class="main-bar">
  <div class="imgs">
    <img src="https://i.imgur.com/SX4tC2y.png" alt="image">
  </div>
  <div class="menu">
    <span class="menu_item">Houses</span>
    <span class="menu_item">Apartments</span>
    <span class="menu_item">Cars</span>
    <span class="menu_item">Rents</span>
    <span class="menu_item">Others</span>
    <span class="menu_item" id="login">Login</span>
  </div>
</div>

Any ideas on how to fix this?

htmlcss

Answer №1

The problem lies in the fixed height that was added to the image container. To resolve this, simply remove the fixed height and incorporate some padding for spacing:

.main-bar {
  background-color: #212121;
  font-size: 1.5vw;
  color: #8a8a8d;
  font-family: sans-serif;
  display: inline-flex;
  width: 100%;
}

.imgs {
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 25px;
  margin-right: 30px;
  width: 700px;
  padding-bottom:10px;
}

.imgs img {
  width: 100%;
  height: auto;
}

.menu {
  width: 100%;
  margin-top: 45px;
}

#login {
  float: right;
  margin-right: 2vw;
  margin-top: -10px;
}

.menu_item {
  padding: 10px;
}

.menu_item:hover,
.login:hover {
  color: #E3E3E3;
  cursor: pointer;
}
<div class="main-bar">
  <div class="imgs">
    <img src="https://i.imgur.com/SX4tC2y.png" alt="image">
  </div>
  <div class="menu">
    <span class="menu_item">Houses</span>
    <span class="menu_item">Apartments</span>
    <span class="menu_item">Cars</span>
    <span class="menu_item">Rents</span>
    <span class="menu_item">Others</span>
    <span class="menu_item" id="login">Login</span>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing a webpage's 'object' using Javascript

There is a webpage I came across with a wealth of data that needs to be documented. And like any regular individual, I’d prefer not to do it manually. Therefore, I was wondering if there is a way to ‘import’ a webpage ‘object’ that could provide ...

javascripthtml

The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Having an issue with applying a specific style to one of my div elements. When using the following code: :style="(index + 1) % 2 == (0) && type.Liste.length === indexVin + 1 ? `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem); ...

javascripthtmlcssvue.js

How can the Bootstrap Jumbotron element be adjusted to perfectly fill the width of the screen?

Currently, I'm utilizing a jumbotron element on my website and aiming to make it fluid in order to adapt and fit the entire jumbotron to the screen width. However, I seem to be facing difficulty when attempting to increase its width. Below is the cod ...

htmlcssbootstrap-4

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

javascriptphphtml

Tips for expanding a CSS row to avoid gaps while utilizing the max-height property

Hey there, I'm trying to figure out how to eliminate the gap (the orange section) that appears when I set a max-height that is smaller than the space occupied by the top section. I assumed the main section would expand to fill the empty space, but it ...

htmlcssvue.js

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel. This is how my code is structured: Images: <img src="1.img"/> <img src="2.img"/> <img src="3.img"/> Prev / Next buttons: <div class="left ...

javascriptjqueryhtmlcss

switch control navbar feature in Django

I am currently working on a project and I am attempting to manage the color change of the navbar logo. After visiting the "about" page on my application, I want the navbar to change color, with half of it turning yellow to better complement the purple back ...

htmlcssdjangotwitter-bootstrap

Tips for showcasing cards in a horizontal inline layout

Hello everyone! I'm currently working on creating dynamic cards, but I'm having trouble displaying them inline. I'd like to arrange the cards horizontally with a scroll bar. https://i.sstatic.net/zqcua.png I want to make them display in ho ...

htmlcssreactjsfrontend

How wide should a <NavDropdown> be in react-bootstrap 5?

Another day, another challenge. CSS is not my forte, oh dear. I'm attempting to adjust the width of a dropdown in react-bootstrap. Here's what I tried: <NavDropdown style={{width: "5vw"}} title="User" id="navbarScroll ...

cssreactjsreact-bootstrapbootstrap-5

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

phpcsshtmlpixel

Instructions on using $.post in jquery to sude uploaded file to a php file for processing

Is there a way to upload photos asynchronously using $.post without relying on .serializeArray()? I want to send a form, containing an upload file, to a PHP processing file. Any suggestions? HTML: <form action="upload1.php" method="post" id="usrform" ...

phpjqueryhtml

Troubleshooting the issue with the <div> tag in ASP.NET MVC 2 and the "float: left;" property. Any solutions to

Issue with the usage of <div> elements Everything runs smoothly: Text "Whatever" appears in column 1, followed by a radio button: No issues here (text without a radio button): The cell immediately following the text "Whatever" should display in co ...

htmlcssasp.net-mvc-2

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

css

I'm looking for an easy way to generate a special effect when my mouse interacts with a div using HTML, CSS, or JavaScript

I'm attempting to replicate this interesting effect where a div is surrounded by a container when the mouse hovers over it. It looks pretty cool, like in this image here: https://i.stack.imgur.com/p0epq.png Does anyone have any suggestions on how I ...

javascripthtmlcss

The embedded iframe on YouTube is displaying the incorrect video

I am currently designing a website and I want to feature a video on the homepage. The video is hosted on YouTube and I need to embed it into my website. <html> <iframe width="560" height="315" src="https://www.youtube.com/embed/spPdelVEs_k?rel= ...

javascripthtmlyoutubeembed

An Angular ng-container situated within a row of an HTML table

I am currently working with a Reactive Form that includes a FormArray (similar to a Game Roster containing basic information such as Start At, Prize, Duration, and an array of players). To display the array of players, I have implemented the following: & ...

htmlangularangular-reactive-forms

The chosen filter will be displayed in the list of active filters

My website displays various products, and like many other similar sites, I am attempting to implement filters for the search results. One of the filters I have is for colors. I am showcasing color thumbnails, and when a user selects a color thumbnail, the ...

phphtml

angular2 ngFor is not functioning properly

I'm having an issue where I cannot get textboxes to appear whenever a user clicks a button. I am attempting to achieve this using ngFor, but for some reason, the ngFor is not iterating as expected. Even after trying to change the array reference with ...

javascripthtmlangulartypescript

Steps to create a basic search form in Flask with mysqldb

My attempt at creating a search form to extract ISBN, author, year and title data from my local MySQL database has been challenging. Despite researching various websites and tutorials, I have not found an ideal solution. Currently, here is what I have acco ...

pythonhtmlmysqlflaskflask-wtforms

Align an Svg layer within another Svg to the center

I'm attempting a seemingly easy task: placing one svg layer inside another and centering it. In this particular situation, I have a simple arrow (represented by an svg path) that needs to be nested within a rectangle (a square shape in this case). T ...

htmlcsssvgiconscenter