Tips for preventing icon overflow when resizing the window to its smallest size

As I work on crafting a navigation bar using flex-box and Bootstrap 4, I encountered an issue where two of the divs, header__center and header__right, were wrapping onto separate lines when the browser window size shrunk. However, my goal is to keep them aligned on the same line regardless of the device's width.

The problem arises when the device width falls within the range of 576 to 614:

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

And another issue occurs when the device's size is extra small, less than 314: https://i.sstatic.net/P7Jhu.png

* {
  margin: 0;
  padding: 0;
}

nav.navbar {
  align-content: center;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
  padding: 0px 20px;
  /* REMOVED TOP PADDING */
}

.fas .fa-search {
  color: #65676b;
}
.... (remaining CSS code herein)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
... (rest of HTML code goes here)

I am seeking guidance on how to ensure that these icons remain on the same line and adapt responsively to varying device widths. Any insights or assistance would be greatly appreciated!

I am considering using media queries to address this issue but could use suggestions on how to approach implementing techniques to keep the icons aligned on the same line.

cssbootstrap-4

Answer №1

Get rid of the padding-left: 10px in the class header__center__option.

Delete all instances of the class fa-lg from your icons.

If you want to enable scrolling, include the following:

nav.navbar{
  ...
  flex-wrap: nowrap;
  overflow: auto;
}

https://jsfiddle.net/290478rf/1/

Answer №2

You just need to group header__left, header__center__option, and header__right under one parent element.

Update:

<div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
</div>

To

<div>
<div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
</div>
</div>

After that, utilize breakpoints to hide or show header__center__item accordingly. This solution will address both of your concerns.

Answer №3

* {
  margin: 0;
  padding: 0;
}

nav.navbar {
  align-content: center;
  position: sticky;
  background-color: white;
  z-index: 100;
  top: 0;
  box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
  padding: 0px 20px;
  overflow: hidden;

  /* REMOVED TOP PADDING */
}

.fas .fa-search {
  color: #65676b;
}

.header__left>img {
  height: 40px;
}

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

.header__input {
  display: flex;
  align-items: center;
  background-color: #eff2f5;
  padding: 10px;
  margin-left: 10px;
  border-radius: 999px;
}

.header__input>input {
  border: none;
  background-color: transparent;
  outline-width: 0;
  padding-left: 10px;
}

.header__center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


/*modified css */

.header__center__option {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 10px;
  margin-bottom: 0;
  height: 60px;
}

.header__center__item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 400;
  padding: 0 2vw;
  height: 60px;
  margin-right: 8px;
  box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}

.header__center__item.active,
.header__center__item.active:hover {
  color: #1877f2;
  /* border-bottom: 1px solid #1877f2;
  border-bottom-width: 3px; */
  background-color: #f8f9fa;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.header__center__item:hover {
  background-color: #e9ebef;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.header_option-link {
  flex-direction: column;
  height: 52px;
  display: flex;
  text-decoration: none;
  justify-content: center;
  color: gray;
}

.header__center__item.active>.header_option-link {
  color: #1877f2;
}

.header_option-link:hover {
  color: gray;
}

.header__center__item.active {
  color: #1877f2;
  border-bottom: 1px solid #1877f2;
  border-bottom-width: 3px;
  background-color: #f8f9fa;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  right: 2px;
  left: 2px;
}

.header__info {
  display: flex;
  align-items: center;
  padding-right: 12px;
  margin-right: 8px;
  border-bottom-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top-left-radius: 18px;
  padding-left: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.header__info__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #050505;
  margin-top: -4px;
  margin-bottom: -4px;
  line-height: 1.3333;
}

.header__right {
  display: flex;
}

.header__info>span {
  margin-left: 10px;
}

.header__items {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: #e4e6eb;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
}

.header__info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-left: -8px;
}

.header__info:hover {
  background-color: #e4e6eb;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
  <div class="header__left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
    <div class="header__input">
      <i class="fas fa-search"></i>
      <input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
    </div>
  </div>
  <div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
    <ul class="header__center__option">
      <li class="header__center__item active">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-plane fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bed fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-bus-alt fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-umbrella-beach fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
      <li class="header__center__item">
        <a class="header_option-link text-decoration-none" href="#">
          <i class="fas fa-spa fa-lg"></i>
        </a>
        <div class="header__option-line"></div>
      </li>
    </ul>
  </div>
  <div class="header__right">
    <div class="header__info">
      <img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
      <span class="header__info__name">User</span>
    </div>
    <div class="header__items">
      <i class="fas fa-envelope-open-text"></i>
    </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

How to position the close (X) button on the corner of an image within a CSS grid

I have a collection of images with varying sizes and ratios in a responsive CSS grid layout. Each image needs to have a close button located at the top-right corner. To achieve this, I have inserted a form within each grid cell with a button and an image i ...

htmlcsstwitter-bootstrapbootstrap-4

Monitor when a button in a grapesjs modal is clicked

When using the Grapesjs Editor, I needed a modal with a form inside it. Upon clicking the submit button, I wanted to trigger a Function that would make an ajax call. To achieve this, I attempted to create a custom component by extending it from the defaul ...

javascriptbootstrap-4bootstrap-modalgrapesjs

How to reduce the default width of Bootstrap carousel components

Click here for the 1st image. To view the 2nd image, click here. This represents the carousel code used on this particular website: <div class="row testing"> <div id="carouselExampleMen" class="carousel carousel-dark s ...

pythonhtmlcsswebbootstrap-5

How to Incorporate a Glyphicon into an ASP.NET Button with Bootstrap

I'm a beginner with bootstrap/asp.net and I think I might be making a mistake somewhere. My goal is to have a bootstrap glyphicon appear next to my button. I believe I am not able to use asp:Button, but instead should use LinkButton. Here is the code ...

cssasp.nettwitter-bootstrapbootstrap-4

Displaying limited items based on conditions in CSS

If there are 10 <p> tags, is it possible to limit them to only 5 by hiding the other 5 using CSS? Do I need to add a class five times with nth-child? Can CSS accommodate conditions for this purpose? Considering that the number of <p> tags is ...

css

Troubles with CSS in Wordpress

Hey there! I'm currently working on some wordpress tasks and running into an issue with the code. Everything looks good in the first two sections, but the third section is displaying at the top. Please refer to the attached image for a visual of the p ...

htmlcsswordpresswordpress-theming

What is the best way to customize a video in Bootstrap 5 so that it remains at the bottom of the screen with centrally aligned text

When using Bootstrap 5, I am facing a challenge with a video on the index page that plays beneath the navigation. I want to maintain the 16x9 aspect ratio and have centered text overlayed on the video. However, I encounter an issue when attempting to set a ...

cssvideooverlaybootstrap-5

Cannot locate the Django bootstrap files

Although I have set up Django with bootstrap by following tutorials, I am facing an issue where Django is unable to locate the static files even when I am replicating the steps shown in the tutorials. The structure of my Project is as follows: webshop ...

pythoncssdjangotwitter-bootstrap

The presence of a CSS-only animation can disrupt the functionality of Bootstrap4's Navbar Toggler on mobile devices

I'm currently working on a CSS-only background animation project. The goal is to have images or colors moving from left to right in an infinite loop. The code I have works as intended, but I've encountered some issues on mobile devices (specific ...

cssanimationbootstrap-4

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

I'm puzzled by the odd horizontal spacing issue between buttons that appears when adding a List Item element to an Unordered List using JavaScript. What could be the cause of

The Issue at Hand One problem I am encountering is the default spacing between my edit and delete buttons in the HTML document. When I use JavaScript to append a new list item that mirrors the structure and class names of the existing buttons, the newly a ...

javascripthtmlcss

Ways to distinguish between two div elements that have scroll bars and those that do not

I created a div with CSS styling. .comment-list { margin: 20px 0; max-height: 100px; min-height: 100px; overflow-y: scroll; width: 100%; background-color:#000; } Here is the HTML code for the div: <div class="comment-list"> </div> When the ...

javascriptjqueryhtmlcss

Explore an illustration of a website with a hover effect

As I delve into the world of web development, I have taken up the challenge of replicating another website's layout to hone my skills. However, there is one aspect of this site that has me stumped =/ <div class="a"> <span>Teste</span&g ...

htmlcsshover

How can SASS be used to style a span based on its content?

In order to add css styling to a span element, I am looking to utilize only the dynamic SASS style processor without relying on any javascript/jQuery. The condition for applying the style should be based on the content of the span. For example: <sp ...

htmlcsssassstyles

Issue with Checkbox Input not Being Checked Upon Click (Styling with CSS Toggle Switch)

I have implemented a unique custom CSS toggle switch to customize the appearance of my checkbox inputs. Check out the project on GitHub. However, I am facing an issue where clicking on the checkbox toggles registers the click twice and does not change the ...

javascriptjqueryhtmlcsscheckbox

The divs are being filled with Bootstrap's separater and list-group components

Check out my pen: http://codepen.io/helloworld/pen/yyoJGR I'm wondering about why the white separator and list grouping are flowing through the divs or the parent row in this code? <div class="container columnStyle"> <div class="row"> ...

htmlcsstwitter-bootstrap-3

Tips for referencing the team name and showcasing it in HTML despite the interference of the backslash character

{ offset: 0, results: [ { teamname_link/_text: "BAL", teamname_link: "", }, ...

htmlcssjson

Adjust the width of the flex item by using flex-direction: column and setting the margin to auto

Can you explain why flex item A doesn't take up the full width of the container when it's set to margin: 0 auto? Check out this jsfiddle for more details. .container { display: flex; flex-direction: column; } .a { margin: 0 auto; bord ...

cssflexbox

Difficulties encountered while attempting to modify a class using Javascript

Recently, I've encountered an issue with my JavaScript where I am unable to keep a particular element's class changed. Despite attempting to change the class to "overlist", it only stays that way briefly before switching back to its original stat ...

javascripthtmlcssfunctionclass

Top Choice for Customizable Location Bar Dragging

I'm currently working on an app that features a draggable location bar. This feature will allow users to navigate through chapters in a book and will be displayed at the bottom of the screen, similar to Kindle or other mobile reading applications. I ...

htmlcssmarkup