Header with a logo and two navigation options

I am facing a challenge where I need to incorporate two navigation bars and a logo on the left side. The desired layout can be seen in the image below.

I am looking for a solution that is both efficient and responsive, ensuring that when the browser size is reduced, the spacing between elements gradually decreases until it eventually switches to a hamburger menu.

Currently, my setup does not match the desired outcome shown in the picture below. I am unsure of how to achieve the desired layout.

https://i.sstatic.net/l26bc.png

.site-nav {
  width: 100%;
  height: 100px;
  display: flex;
}
.site-nav .nav-logo {
  width: 200px;
  height: 100px;
  float: left;
  display: flex;
}
.site-nav .nav-logo img {
  width: 97px;
  height: 47px;
  margin: auto 0;
}
.site-nav .nav-links {
  height: 100px;
  float: right;
  flex-grow: 1;
}
.site-nav .nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
}
.site-nav .nav-links ul li {
  float: left;
  margin: auto;
  padding-left: 16px;
}
.site-nav .nav-links ul li:not(:last-child) {
  padding-right: 16px;
}
<nav class="site-nav">
        <div class="container">
            <div class="nav-logo">
                <img src="logo.png" alt="">
            </div>
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>

htmlcss

Answer №1

To achieve the desired layout, you can utilize nested flexboxes and media queries. In my solution, I incorporated placeholder images for the logo and hamburger icon.

ul {
  list-style: none;
  margin: 0;
}

.site-nav {
  width: 100%;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

.nav-links {
  display: none;
}

.nav-links .nav-list {
  display: flex;
  flex-wrap: no-wrap;
}

.mobile-menu {
  position: relative;
}

.mobile-menu .nav-list {
  display: none;
  position: absolute;
  bottom: -90px;
  left: -40px;
}

.mobile-menu:hover>.nav-list {
  display: inline-block;
}

.nav-links .nav-list>li:not(:last-child) {
  margin-right: 1rem;
}

@media screen and (min-width: 500px) {
  .mobile-menu {
    display: none;
  }
  .nav-links {
    display: inline-block;
  }
}
<nav class="site-nav">
  <div class="container">
    <div class="nav-logo">
      <img src="https://via.placeholder.com/50x50" alt="">
    </div>
    <div class="mobile-menu">
      <img src="https://via.placeholder.com/30x30" alt="">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
    <div class="nav-links">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
    <div class="nav-links">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer №2

Consider this example for a demonstration of utilizing CSS grid to define columns. By using additional properties like justify-content, you can control the spacing between the columns.

.site-nav {
  width: 100%;
  height: 100px;
}

.site-nav .container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

.site-nav .nav-logo {
  grid-column: 1;
  width: 200px;
  height: 100px;
  float: left;
  display: flex;
}
.site-nav .nav-logo img {
  width: 97px;
  height: 47px;
  margin: auto 0;
}

.site-nav .nav-links {
 grid-column: auto;
}

.site-nav {
  list-style-type: none;
}

.site-nav li {
  display: inline-block;
}
<nav class="site-nav">
        <div class="container">
            <div class="nav-logo">
                <img src="https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg" alt="">
            </div>
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
            
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>

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

Tips on how to align a label in the middle of a line using HTML and Bootstrap

I'm having trouble creating an inline form with a text and select input. Despite using Bootstrap 5, I can't seem to achieve the desired appearance. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/e ...

htmlcssbootstrap-5

How do I horizontally center a tooltip for a button using CSS?

I've been struggling to find a solution for this issue. The structure I have is similar to the following. This excerpt represents just one out of five menu points, with normally five <li> items in the ul. <nav id="loggedInMenu"> <u ...

cssnavigationtooltip

What could be causing my bootstrap cards to stack vertically instead of being displayed horizontally across the page?

Can someone help me figure out why my bootstrap cards are stacking on top of each other instead of aligning side by side across the page? Everything else on the website is functioning correctly, so I'm not sure what the issue is with these cards and ...

htmlbootstrap-4

Tips on adjusting the height of a background image based on the content of the page

Struggling with getting my background image to adjust based on page content size. The app has a main div and sidebar navigation. Background styles are set for the main div: const styles = makeStyles(theme => ({ backgroundStyle: { flexGrow: 1, ...

cssreactjsmaterial-ui

The length of the LinearProgress bar does not match the length of the navbar

Utilizing the LinearProgress component from Material UI, I created a customized ColoredLinearProgress to alter its color: import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import { LinearP ...

javascripthtmlreactjsmaterial-ui

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

Emphasize the content within the table cell

Currently, I am working with an HTML table that is being generated by Java. My goal is to highlight the text within a table cell without changing the background color of the entire cell. I should mention that I am aware of the option to achieve this by ma ...

htmlcss

Having trouble with a basic image carousel function?

Currently in the process of developing a basic image carousel for a practice website I'm working on. I've been following this tutorial on YouTube. At the 7:10 mark, the tutorial demonstrates the specific function that I need help with. The tuto ...

javascriptjqueryhtmlcsscarousel

Is there a way to detect unnecessary or unused inline CSS styles that are not needed or blank?

Is there a way to detect unnecessary CSS inline styles that are typed but not actually needed? For example, in a .js file: line: { borderBottom: '1px #ddd solid', paddingBottom: '5px', backgroundColor: 'white', ...

javascripthtmlcssreactjslint

The layout option is not specified within the ejs-mate package

error boilerplate I am baffled as to why the layout is not being defined. I have installed ejs-mate and ejs, yet it still gives this error. <% layout('layouts/boilerplate') %> <h1>All campgrounds </h1> <div> <a ...

javascripthtmlnode.jsejs

I'm looking to optimize my paragraph for small screens by incorporating a Google AdSense banner

I need help adjusting my content with a Google banner for small screens. Here is an example image: Example Image Within the parent div with the class name parent-content, there is a banner div named ad3. Below is the code I have written for screens with ...

htmlcssmedia-queries

Display SVG at full size without any distortion

How can I make the SVG image 100% by 100% without scaling? I want the image to be centered on the page both horizontally and vertically. The challenge is that I also want to display the areas outside of the SVG artboard, so using CSS to center it won&apos ...

javascriptjqueryhtmlcsssvg

What exactly is the function of $fix-mqs within the IE Sass mixins created by Jake Archibald?

I'm really struggling to understand the purpose behind using $fix-mqs in the mentioned link: Although I can grasp how the rest of the mixin functions, this particular part has me stumped. In a project where I've utilized this pattern, everything ...

cssinternet-explorersass

CSS Grid expands the item width on its own when there is still space left

Having some queries regarding the piece of code provided. Currently, I have a collection of 5 cards displayed in rows of 3 cards each using the styling grid-template-columns: repeat(3, minmax(200px, 1fr));. My concern is whether there is a way for the 4th ...

javascripthtmlcss

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

javascriptcss

What is the method for adjusting the fade OUT speed of Bootstrap tabs?

Looking to adjust the speed of a fade effect in Bootstrap, I came across this solution involving CSS: @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .fade { opacity: 0; -webkit-transition: opacity ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

htmlcssreactjsfirefoxcss-hyphens

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

javascripthtmlcss

What steps can be taken to get the input type color to function properly in IE-11 in the year 202

Is there a way to get the input type color to function properly in IE as of 2020? <input type="color"> I've experimented with several polyfills, but have not had any success. As a final option, do you have a recommendation for an external libr ...

javascripthtmlinternet-explorerinternet-explorer-11

The functionality of the click event attached with the addEventListener is

I have a unique project where I am developing a user interface for a paper-rock-scissor game. To create the UI, I included four buttons: "Start game," "rock," "paper," and "scissor." Initially, I wrote separate code for each button, which worked perfectly ...

javascripthtmlcss