What's the most effective method for setting up this header using the flex grid system?

I have been able to arrange the logo, search bar, and text in different columns, but I'm struggling to figure out how to position the <nav> below the search bar while maintaining the height consistency with the logo.

#outer {}

#logo {
  padding: 1%;
  background: red;
  margin-right: 1em;
  margin-left: 1em;
}

#search_bar {
  background: green;
  padding: 0;
}

#nar_bar {
  clear: both;
}

#quote_holder {
  background: pink;
  margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="outer" class="h-100 container-fluid">

  <div class="row">

    <div id="logo" class="float-left">
      Logo,<br/> Logo,
      <br/> Logo.
    </div>

    <div id="search_bar" class="col">
      <div class="card-body row no-gutters align-items-center">
        <!--end of col-->
        <div class="col">
          <input class="form-control form-control-sm form-control-borderless" type="search" placeholder="Search topics or keywords">
        </div>
        <!--end of col-->
        <div class="col-auto">
          <button class="btn" type="submit">Search</button>
        </div>
        <!--end of col-->
      </div>

    </div>

    <div id="quote_holder" class="col align-middle">

      <p class="align-middle">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>

    </div>


  </div>

  <div id="nar_bar" class="col">

    Text Text Text Text Text Text

  </div>

</div>

My goal is to replicate the following layout

htmlcssflexboxbootstrap-4

Answer №1

To accomplish this, you can utilize the power of flex. Below is a sample implementation:

nav {
  width: 100%;
  margin-top: 10px;
}

.logo {
  display: flex;
  align-items: center;
}


.logo img{
  width: 100%;
}

.subcontainer {
  padding: 10px;
  background: #eee;
}

.subcontainer .searchbar,
.subcontainer .menu {
  display: block;
}

.subcontainer .searchbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subcontainer .searchbar .bar {
  background: #999;
  height: 20px;
  width: 70%;
}

.subcontainer .searchbar button {
  width: 25%;
}

.subcontainer .menu ul{
  padding: 10px;
  display: flex;
  align-items: center;
  margin: 0;
}

.subcontainer .menu ul li{
  list-style: none;
  padding: 0 10px;
}

.text {
  background: #eee;
  display: flex;
  align-items: center;
}

.text p {
  margin: 0;
  padding: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav>
  <div class="container">
  <div class="row">
    <div class="logo col-2 col-sm-2 col-md-1">
      <img src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg">
    </div>
    <div class="subcontainer col-10 col-sm-10 col-md-5">
      <div class="searchbar">
        <div class="bar"></div>
        <button>Search</button>
      </div>
      <div class="menu">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Projects</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
    <div class="text col-12 col-sm-12 col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius semper eleifend.</p>
    </div>
  </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

CSS - positioning the sidebar on the far left edge of the screen (refer to image)

Is there a way to create a layout similar to this design: https://i.sstatic.net/yjkeD.png For a demonstration, see here: http://jsfiddle.net/ymC82/ Current HTML code: <div class="wrapper"> <aside> Sidebar </aside& ...

htmlcss

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...

javascripthtmlcssjsone-commerce

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

I'm currently revamping a website that features a header with 100% screen height, but I need it to shrink down to 0px when a user starts scrolling. The issue I'm facing is that once the header shrinks to 0px, the page content ends up slightly abo ...

javascriptjqueryhtmlcssscroll

I am looking to incorporate an HTML file into my JSON data

Is there a way to include an HTML file in my JSON by using the $.get() function or any alternative method? { "user": { "username": $.get('profile.html') } } ...

jqueryjsonhtmlfileload

Resolving syntax error to enable dismissible device alerts

I am attempting to make my devise alerts dismissible. According to the bootstrap documentation found at this link, adding data-dismiss="alert" is necessary. However, when I try to implement this into my application layout as shown below, a syntax error oc ...

htmlruby-on-railsrubytwitter-bootstrapdevise

Symfony: The Database Query Button with a Pop-up Feature

I am looking to create a button that will automatically search my database for all users with a "secouriste" attribute set and display their first name, last name, and phone number in a popup. After conducting research, here is what I have gathered: In m ...

javascriptphphtmlajaxsymfony

Implementing CSS to effectively scale images within a fixed box size

I am attempting to create a collection of images with rounded borders that will expand on hover, while staying within a specified box size. I want the effect to give the illusion that the image is only zooming inside the box and not physically enlarging on ...

htmlcss

The alignment of the website design is off

I'm in the process of creating a custom template for my website and everything was going smoothly until I encountered an issue with the news bar placement. Instead of appearing below the navbar and welcome message bar, it's showing up above the n ...

csshtml

Ensuring smooth video playback on a website

My website is experiencing issues due to a large mov file that's 157 megabytes. When I try to run it on my page using a javascript scroller animation, the animation becomes choppy. Additionally, I used css to simulate a mask, but it doesn't get m ...

htmlvideoflashmov

Chrome does not support top.frames functionality

I have three HTML pages: main.html, page1.html, and page2.html. I am displaying page1.html and page2.html within main.html using the code below. <!DOCTYPE html> <html> <frameset frameborder="1" rows="50%, *"> <frame name="f ...

javascriptjqueryhtml

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

htmlangulartypescriptangular-materialangular-reactive-forms

Creating interactive tables in HTML and Javascript where users can expand and collapse rows by clicking on a parent row

After days of trying to solve a specific issue, I have realized that I cannot do it without some help. The task at hand is to enable the functionality of clicking on a table row to reveal more details, but in my case, these additional details are presented ...

javascriptjqueryhtmlcsszurb-foundation

Adjust the column sequence in Bootstrap for mobile devices within a loop

I am facing a challenge with changing the column order in Bootstrap for mobile devices. The .col-order doesn't seem to work properly because it is inside a loop. Currently, I have $loop->iteration set up to display different backgrounds on columns ...

laravelbootstrap-4

Error in Python Django when using the Post method: MultiValueDictKeyError

When a user chooses a color in a form, I should receive the value, but instead I get a MultiValueDictKeyError and I can't figure out why. This is the code in my views: def primeira_pergunta(request): trans = Tranfer() my_list = trans.shared[ ...

pythondjangotemplatesbootstrap-4

Arranging buttons in a row with Bootstrap 5

Struggling to align the buttons on my webpage side by side in the center, I've tried two Bootstrap 5 classes but they're not achieving the desired look: https://gyazo.com/c23f2eade4614380aec547b11e61387a https://gyazo.com/e40a678b02c9f641f746b1c ...

javascripthtmlcssbootstrap-5

Tips for fixing the select2 display issue when using BootStrap 4 in combination with the Laravel framework

I've been diving into the world of Laravel framework and decided to integrate Select2 into my project using Laravel-mix. After spending several hours figuring it out, I finally got it working smoothly, except for a minor yet frustrating issue. Whenev ...

laravelbootstrap-4jquery-select2laravel-mix

Inserting an Excel spreadsheet into a webpage as a table

Looking for a quick and easy way to include an Excel spreadsheet on a website? Let's say you need to display a table with 100 data points in an HTML or PHP file. ...

phphtmlexcel

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

No space left around the image's border

Whenever I apply a border to an image, it comes with a margin and the image itself receives white padding. How can I remove the margin from the border? This is how I currently have it: border: 1px solid gray; ...

htmlcssbordermarginpadding