CODEWITHSUNDEEP
cssbootstrap-4
Tinabot
Tinabot

Reputation: 429

Elements overlapping each other when resizing the window

I have a header section in a website which consists of:

And I want to make them in a single row, but the problem is that they overlap each other when I am resizing the window, specifically the login button overlaps the logo and the language picker overlaps the main menu.

<div id="header-container" class="container">
  <div id="header-container-nav" class="row align-items-center">
    <div class="col-md-3">LOGO</div>
    <div class="col-md-1">LOGIN BUTTONS</div>
    <div class="col-md-5">MENU</div>
    <div class="col-md-1">LANGUAGE</div>
  </div>
</div>

Upvotes: 1

Views: 287

Answers (1)

Roysh
Roysh

Reputation: 1550

Instead of using bootstrap here, I would use flex

I'd use this HTML

  <div id="header-container-nav">
    <div">LOGO</div>
    <div>LOGIN BUTTONS</div>
    <div>MENU</div>
    <div>LANGUAGE</div>
  </div>

and this CSS

#header-container-nav {
  display: flex;
}

And now you can adjust the size of each item (check out this article http://javascriptkit.com/dhtmltutors/css-flexbox2.shtml)

Upvotes: 2

Related Questions