Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?

I've designed a sleek navbar located at the bottom of my webpage featuring a central logo leading to the home page, with two links on each side directing users to specific pages. Using @media CSS, I made it responsive by reducing its size as the screen size decreases. However, once it reaches the xs/sm breakpoint, the navbar becomes too crowded for the screen.

Example:

|-------Video-------|-------About-------|------LOGO/BRAND------|------Schedule------|--------Ask--------|

Is there a way to stack the navbar links on top of each other on both sides while maintaining a clean and symmetrical appearance, with the logo remaining centered? I prefer this over turning it into a collapsed menu button.

Example:

|----Video----LOGO/BRAND----Schedule----|

|----About--------------------------------Ask-------|

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

In case you are using bootstrap v4, consider nesting an additional row within your first and third columns, followed by placing two columns inside the new row (one for each link). Utilize col-sm-12 to ensure the line wraps down on smaller screens and col-md-6 to allow horizontal stacking as the screen size increases. Keep in mind that this approach involves a considerable amount of nested divs.

Answer №2

To achieve the desired layout with minimal code, you can utilize nested flex containers:

.container, .left, .right {
  display:flex;
}

.left, .right {
  flex-wrap:wrap;
}

.container div, .left div, .right div {
  flex-grow:1;
  text-align:center;
  padding:0px 8px 0px 8px;
}
<div class="container">
  <div class="left">
    <div>Video</div>
    <div>About</div>
  </div>
  <div class="logo">LOGO/BRAND</div>
  <div class="right">
    <div>Schedule</div>
    <div>Ask</div>
  </div>
</div>

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

What is the best way to display text from a header box across multiple line boxes in real time on an HTML page?

Looking to enhance an HTML layout with a header box and line comment boxes. <textarea name="order[header_comments]"></textarea> The line comment boxes are structured as follows: <textarea name="line_comments[0][line_comments]"></tex ...

javascriptjqueryhtmljquery-selectors

Difficulty with the increment of my counter when using addeventlistener

I'm currently facing a challenge that I can't seem to figure out... Here is the issue (in JavaScript): export default { name: "TodoList", data() { return { title: "", content: null, isDone: true, count: 0, n ...

javascripthtmlvue.js

The issue with the JQuery Cookie Plugin is that it is unable to function properly due to the

Although I know there are many similar questions out there, please bear with me. I am not as proficient in JQuery as I am with HTML/CSS, and this is my first time using cookies. On my website, I have a green banner that should disappear when the user click ...

jquerycsswordpresscookies

Could someone please clarify why the data I input is not appearing in my hbs file?

I've been facing an issue where I am unable to send data from my main.js file to bookings.hbs file, although it works perfectly fine when sending the same data to index.hbs file. Can someone help me identify where the error might be occurring? App.js ...

htmlnode.jsmongodbexpresshbs

Modifying the appearance of PHP code by applying CSS styles to the font

Here is the HTML code: <!DOCTYPE html> <html> <head> <title>Greeting Service!</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /& ...

phphtmlcssformsswitch-statement

Is it possible to change button behavior based on input values when hovering?

Currently, I am attempting to create a webpage where users can input two colors and then when they press the button, a gradient of those two colors will appear on the button itself. <!doctype html> <html> <head> <script src=&apos ...

javascripthtmlcss

The div is refusing to align to the left within the same row

I need assistance in creating a footer layout with an h3 and two div elements, all floated to the right with a percentage margin. The issue I'm facing is that the second div element (div2) is not floating to the left as expected but instead aligns be ...

htmltextfloating

Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag. However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2). Is there a way to ach ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Discovering hidden elements using Overflow:hidden

I need help figuring out how to display the cropped part of my text without using scroll bars in css. For example: td { overflow: hidden; } The hidden content is important, but the table property is fixed. table { table-layout: fixed; } I want the ...

css

Expand the <div> to match the complete height of its containing <div> element

There are multiple div blocks within a parent block: one for the menu on the left, and one for the text on the right. How can you make the right inner block stretch to the full height of the parent block like the left one? The parent block has a minimum he ...

htmlcss

Calculation operations nested within each other

Looking for a solution here. I am trying to utilize the CSS calc operation to carry out two calculations: I aim to make my width equal to (100% / 7) - 2 But whenever I attempt multiple operations in a CSS calc function, it doesn't work: width: cal ...

cssexpressioncss-calc

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

The Prev and Next controls on the web carousel have mysteriously vanished

I managed to successfully create a carousel in the picture below, but I'm facing an issue where the next button is positioned on the white side of the page. Despite trying to enlarge the carousel's size, it ends up going below the category contai ...

htmlcarousel

Sliding Dropdown Menu with Dynamic Title Change Upon Selection

I'm having an issue with a dropdown menu on hover that slides down and then back up. The active list item serves as the title of the dropdown. When a user clicks on an <li>, it becomes active and receives the class active-markup-style which sets ...

jqueryhtmlcss

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Navigate to items within a content block with a set height

I have a <div> that has a fixed height and overflow-y: scroll. Inside this div, there is mostly a <p> tag containing a long text with some highlighting (spans with background-color and a numbered id attribute). Just to note, this is an HTML5 a ...

javascriptangularjshtml

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

javascriptjqueryhtmlcss

Struggling to animate the selector of a nested div in Jquery?

Despite trying numerous variations, I am struggling to identify the correct selector of a nested div. The goal is to animate this particular div, but since no animations are taking place, I suspect that I have not selected the right element. Here is the a ...

javascriptjqueryhtmlcss

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

Moving smoothly while retaining absolute positioning

I have a question about a particular scenario. I have a div element that is styled like a ball and I want it to transition diagonally across the page to the bottom right corner instead of moving suddenly. However, this is not happening as expected. Can you ...

htmlcssanimationcss-transitionscss-position