Division of two "div" sections

I have designed my webpage using three separate div elements for [logo, brand name], [product details], and [hamburger icon]. However, when applying display=flex and flex=1 in the CSS, I noticed that the last two elements are getting stuck together. Can someone please assist me in identifying the errors in my code? Here is the output of my design. I apologize if this question seems silly, as I am new to working with CSS.

    header {
        width: 95%;
        margin: auto;
        display: flex;
        align-items: center;
        font-family: Lato;
        font-weight: 1000;
        background: rgb(30, 165, 125)
}
    .logo-container, .nav-links, .hamimg {
        align-items: center;
        display: flex;
        flex: 1;
        margin: auto;
    }
    .logo {
        height: 5vh;
        padding: 0px 0px 0px 10px;
    }
    .company-name {
        padding: 0px 0px 0px 10px;
    }
    .navs {
        list-style: none;
        display: flex;
        flex: 1;
    }
    .nav-link {
        padding: 0px 5px 0px 5px;
    }
    .hamimg {
        height: 5vh ;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Sales Dep.</title>
    <link rel="icon" href="../Assets/cube.ico">
    <link rel="stylesheet" href="../CSS/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
    <header>
    <div class="logo-container">
        <img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
        <p class="company-name">Mobile Sales Dep.</p>
    </div>
<nav>
    <div class="nav-links">
        <ul class="navs">
            <li class="nav-link">Specs</li>
            <li class="nav-link">Questions</li>
            <li class="nav-link">Reviews</li>
            <li class="nav-link">Prices</li>
        </ul>
    </div>
</nav>
<div class="hamburger">
    <img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
    </header>
</body>
</html>

htmlcss

Answer №1

I have provided the necessary updates for your implementation.

It is important to note that there is no requirement to set flex: 1 for all child elements of the header. Setting this property will result in the nav, hamburger icon, and logo having equal width, which may not be appropriate as their sizes differ.

To achieve your desired outcome of centering the nav items between the logo and hamburger icon, you can simply use margin: 0 auto.

The modified header layout is illustrated in the attached implementation.

header {
  width: 95%;
  margin: auto;
  display: flex;
  align-items: center;
  font-family: Lato;
  font-weight: 1000;
  background: rgb(30, 165, 125)
}

.logo-container,
.nav-links,
.hamburger {
  align-items: center;
  display: flex;
}

.nav-links {
  margin: 0 auto;
}

.logo {
  height: 5vh;
  padding: 0px 0px 0px 10px;
}

.company-name {
  padding: 0px 0px 0px 10px;
}

.navs {
  list-style: none;
  display: flex;
  flex: 1;
}

.nav-link {
  padding: 0px 5px 0px 5px;
}

.hamimg {
  height: 5vh;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile Sales Department</title>
  <link rel="icon" href="../Assets/cube.ico">
  <link rel="stylesheet" href="../CSS/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>

<body>
  <header>
    <div class="logo-container">
      <img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
      <p class="company-name">Mobile Sales Department</p>
    </div>
    <nav class="nav-links">
      <ul class="navs">
        <li class="nav-link">Specs</li>
        <li class="nav-link">Questions</li>
        <li class="nav-link">Reviews</li>
        <li class="nav-link">Prices</li>
      </ul>
    </nav>
    <div class="hamburger">
      <img class="hamimg" src="../Assets/hamburger.ico" alt="Hamburger Icon">
    </div>
  </header>
</body>

</html>

Answer №2

Instead of using flex: 1 and margin: auto, you can achieve the desired layout by simply adding justify-content: space-between to your header CSS rule and remember to remove the default padding from your ul:

header {
  width: 95%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Lato;
  font-weight: 1000;
  background: rgb(30, 165, 125)
}

.logo-container,
.nav-links,
.hamburger {
  align-items: center;
  display: flex;
}

.logo {
  height: 20px;
  padding: 0px 0px 0px 10px;
}

.company-name {
  padding: 0px 0px 0px 10px;
}

.navs {
  list-style: none;
  display: flex;
  padding: 0;
}

.nav-link {
  padding: 0px 5px 0px 5px;
}

.hamimg {
  height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
  <div class="logo-container">
    <img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
    <p class="company-name">Mobile Sales Department</p>
  </div>
  <nav>
    <div class="nav-links">
      <ul class="navs">
        <li class="nav-link">Specifications</li>
        <li class="nav-link">Queries</li>
        <li class="nav-link">Feedback</li>
        <li class="nav-link">Pricing</li>
      </ul>
    </div>
  </nav>
  <div class="hamburger">
    <img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="Hamburger Icon">
  </div>
</header>

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

"Position the input file with Bootstrap's input text for a seamless alignment

After experimenting with the design of my input file using this code snippet, I am facing difficulties aligning the button within the text input of a bootstrap element. Below is the code I have used to style my input field, but unfortunately, the bootstra ...

css

One-line decorative border design

I'm experiencing an issue with a PNG image that I want to use as a border-image. The image is 10px x 1px in size, but when I try to use it, it only appears in the corners and doesn't repeat across the entire border. Can anyone help me figure out ...

htmlcss

Include a clickable hyperlink within a column in JQGrid that, when clicked, triggers a specific Jquery function

I am dealing with a JQgrid that only has 5 columns. Below is the code I have attempted: jQuery("#grdAnn6InvstDetails").jqGrid({ url: RootUrl + 'FDIAS/Ann6InvDtlsGridData', datatype: 'json', mtype: 'POST&ap ...

javascriptjqueryhtmlhyperlinkjqgrid

What could be causing some videos not to load on a Chrome page?

Make sure to click on the link using a webkit browser. Upon loading, you should see a 4x4 grid of videos, but in Chrome, only 1-3 videos tend to load. Interestingly, it works perfectly fine on Safari. Why is this discrepancy happening even though they a ...

htmlvideo

Photo positioned on top of the form with Bootstrap 5

I am working on creating a responsive webpage using Bootstrap, where I need to display a large image above a form. To manage the size of the image, I have placed it inside a "peek-view" container which allows scrolling both horizontally and vertically to v ...

htmlcssbootstrap-5

Concealing overflow in an SVG element with absolute positioning

Looking to hide the parts of the circle that extend beyond the shadowed container. Utilizing bootstrap-4 for this project. body { overflow: hidden; } .container { margin-top: 5%; width: 1200px; height: 625px; border-radius: 4px; background- ...

csssvgbootstrap-4

Maintain the image's aspect ratio by setting the width equal to the height when the height is

I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...

htmlcss

Sending HTML output to a PHP script

After setting up my HTML form with an action attribute pointing to "filename.php" and a method of post, I managed to generate JSON output by clicking the Submit button using the following code: $('#result').text(JSON.stringify($('form' ...

phphtmlajaxjson

What is the best way to trigger a function exclusively upon clicking a particular element?

My goal is to enable the user to interact with the model by positioning cubes in space upon clicking the "Cubes Mode" button. I currently have a script from the three.js website that achieves this, but I want it to only run when the mentioned button is cli ...

javascripthtmlthree.js

CSS: Floating navigation bar that becomes fixed upon reaching the top of the page

Looking for a creative approach to achieve the following: An innovative navigation bar that initially appears on a page regularly but then becomes fixed at the top as I scroll down. An alternative perspective: imagine a navigation bar that starts off unf ...

csstwitter-bootstrapnavbar

Header with h1 formatting

I'm having trouble getting 'by Jackie' to align under the 'Bella' logo without adding excessive space. Does anyone have any suggestions on how to resolve this issue? HTML: <div class="header"> <div class="wrapper"> ...

jqueryhtmlcssheader

The ID becomes corrupted when there is duplicate information in MYSQL

Hey there! I've set up a database for a school project competition where people can join, and I've implemented a feature to prevent duplicate email addresses. However, even if there is a duplicate, the ID will still increment. For example, if som ...

phphtmlmysql

Google Map not rendering correctly when dynamically implemented for the second time

When this specific HTML code is pasted into an .html document and opened directly in a web browser, it showcases the issue I am experiencing. <!DOCTYPE HTML> <html ng-app="myApp"> <head> <link href="https://netdna.bootstrapcdn.com/bo ...

javascripthtmlangularjsgoogle-mapsangular-ui-bootstrap

Combining an image and a card in Bootstrap 5: a step-by-step guide

Is there a way I can align an image and a card in the same line like in this example? I want the image and card to be combined in one line, but when the page is viewed on mobile devices such as Android or iOS, I want the image to appear at the top with th ...

cssbootstrap-5

Creating a Responsive Design with Bootstrap 4 - Adjustable Height Structure

I am facing an issue with my website built on Bootstrap 4. I am trying to make a layout that utilizes the full height of the screen. I had expected the new "flex" grid system in Bootstrap 4 to facilitate this, but it seems like I might be implementing it i ...

htmlcssflexboxtwitter-bootstrap-4

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

htmlcss

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

https://i.sstatic.net/X36eG.png Is there a way to format the text for "Guest signed up" and "Guests attended" in bold while keeping the values normal? Here is my current code: <li class="list-group-item">Guests signed up: <%= guestSignu ...

javascripthtmlbootstrap-4ejs

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

cssyoutube

Using PHP to swap out HTML elements

I need a solution to display text with HTML tags as plain text, without the browser interpreting them. I want the output to be similar to how HTML code viewers render it. For example: replacing <div> with <span><</span><span>d&l ...

phphtmltags

Fluid centering of DIV content both vertically and horizontally

Check out this example: When dealing with fluid divs, line height won't work as expected. My current code relies on line-height which doesn't work when the box sizes change. How can I ensure that a link (content) always appears perfectly centere ...

htmlcssxhtmlmarginfluid-layout