When the window is resized, elements overlap with one another

I need help with organizing the header section on my website, which includes:

  • Logo
  • Login and Register buttons
  • Menu
  • Language picker

I want to display them all in a single row, but I'm having trouble as they overlap when I resize the window. Specifically, the login button overlaps the logo and the language picker hides part of 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>
cssbootstrap-4

Answer №1

Instead of relying on bootstrap for this layout, I suggest utilizing flexbox

My preference would be to structure the HTML like this:

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

For styling, you can apply this CSS:

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

You have the flexibility to adjust the size of each item by referring to this helpful article

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

Why do they call me the Commander of Errors?

Alert: PowerShell has detected that a screen reader may be in use and has disabled PSReadLine for compatibility reasons. To re-enable it, simply run 'Import-Module PSReadLine'. PS C:\Web Development> scss --style expanded "c:\W ...

htmlcssbootstrap-4sasscompiler-errors

Display/hide the entire div element

I am currently working on a project with 2 divs, where I want to display only one div at a time and hide the other. For example, if div 1 is visible, then div 2 should be hidden. You can check out what I have done so far in this demo. Everything is workin ...

javascriptcssbootstrap-4

How to Place Text and Images Side by Side using Bootstrap

I am new to using Bootstrap and I am attempting to place text next to an image. Despite trying the float class, the image keeps appearing below the text instead of beside it. I would like to have the img tag positioned beneath the text tag in the code. A ...

htmlbootstrap-4

Tips for adjusting the width of a field within an existing OpenERP7 form view utilizing percentages instead of pixels

In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...

cssxmlviewodooopenerp-7

When incorporating Routes into App, it is important to note that React does not accept functions as valid children

I am currently working on wrapping Routes using a Layout component to organize all content within a bootstrap 12 column grid. However, I am facing an issue where my text inside Route components is not being wrapped and I receive a warning stating that func ...

javascriptcssreactjsbootstrap-4

How to traverse up to the parent element using XPath in nightwatch

Here is the structure I am dealing with: <div class="class"> <h4 class="class2"> "Condition" </h4> <div class = "click_class">Click_text </div> </div> I need to click on the element with class ="click ...

cssxpathautomated-testsnightwatch.js

Creating a new image by extracting a specific HTML div tag that contains an image and its layers

I currently have a div element that includes an image element along with multiple other div elements containing small text displayed above the image. I am looking to save the image along with its content to a new image file. Any suggestions or ideas are ...

c#javascriptasp.netcsshtml

Fixing PNG transparency in IE6 using positioned Background

I found an effective solution to fix PNG transparency on background images in IE6: ul li a { background-image: url('/NewSite/Content/Images/Sprite.png'); background-repeat: no-repeat; background-position: 0 -48px; background-imag ...

cssinternet-explorer-6png-transparency

Database-driven menu selection

I am currently working on creating a dynamic side navigation menu that pulls its content from a database. The goal is to have the main categories displayed on the left-hand side, and when one is clicked, the others will slide down to make room for any subc ...

phpjqueryhtmlcss

applying different styles to various elements

As a newcomer to the world of jQuery, I am attempting to achieve the following goal: I have several instances of a div, and for each instance, I randomly assign a class from a predefined list in order to modify certain attributes. While this process is su ...

jqueryhtmlcssrandom

Attempting to style the <img> tag with CSS, however, no changes are being applied

I have implemented expand/collapse functionality to a table using jQuery and I am now working on adjusting the button positioning with CSS. However, I am having trouble targeting the img element. Take a look at this snippet from my code: <body> &l ...

jquerycssimage

Having trouble with -moz-box-flex not flexing? It works perfectly with (Chrome/Webkit) browsers!

I have been searching for hours to figure out why Firefox is not flexing my page content in HTML/CSS. It's working fine in Chrome, and I've double-checked that each -webkit-box-flex has a corresponding -moz-box-flex. Can anyone point out what I m ...

csshtml5-canvas

Unlock the power of jQuery to apply CSS transition effects and animations with precision

A web application utilized Bootstrap, featuring a toggle navigation for the sidebar drawer/navigation that was supposed to be animated by default. However, there appeared to be no animation happening. To address this issue, the following CSS code was imple ...

jquerycsstwitter-bootstrap

How can I create a smaller box with text inside using Bootstrap button?

For my current project, I am trying to add a bootstrap button with a small white box next to the main text containing additional text. If you need a visual reference, check out this image: Button example I have searched extensively for a solution but have ...

htmlcssbootstrap-4

Replace jQuery CSS with standard CSS without using !important to override styles

Recently, I encountered a puzzling situation: I have an element with the following CSS properties ($(this) represents the cloned object): clone.css({ 'width': $(this).width() + 'px', 'height': $(this).height() + ' ...

javascriptjqueryhtmlcss

What is the best way to ensure that a list-group scrolls within a div instead of adjusting its height?

I have a div on my webpage that resembles a receipt. This div dynamically adds X items, with a full height of 95% for graphic design purposes. The problem arises when the div reaches 95% of the screen height and a new item is added, causing the entire page ...

htmlcssbootstrap-4

The inability to remove automatically loaded text in jQuery Mobile is a persistent issue

<script> $(document).bind("mobileinit", function(){ $.mobile.loadingMessage = false; }); </script> <script src="http://www.mywebsite.com/scripts/jquery.mobile-1.4.2.min.js" type="text/javascript"></script> Despite f ...

jqueryhtmlcss

Get notified about the number of cells you've selected by simply dragging on a table

Is there a way to display the number of selected cells in a table when dragging with the mouse? I have a table set up, and I'd like to create an alert that shows how many cells are selected while dragging. Here is the link to my fiddle: http://jsfiddl ...

jqueryhtmlcssarrays

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

The CSS transition is failing to revert to its original state after being combined with animations

My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to ...

htmlcsscss-animationscss-transitions