Combining Bootstrap, flexbox, and a mobile-friendly hamburger menu for optimal

Just a quick note to clarify that I am primarily a backend developer, not proficient in frontend.

The layout I currently have looks like this:

I am unsure whether I should stick with the current setup or switch to using a grid. My main goal is to have a side menu and content section both at 100% height. Flexbox seemed to be the only option that achieved this without displaying scrollbars.

However, when I resize the screen, two issues arise:

  • The content no longer takes up 100% of the height
  • The side menu shifts to the top - which is actually intentional on my part

My first question is how can I resolve the issue of the content not taking up the full height anymore?

Secondly, what steps should I take to display a hamburger menu on phones instead of the side menu moving upwards?

htmlcssbootstrap-5

Answer №1

Struggling with flexbox?
Make sure to activate the flex behavior for all breakpoints using .d-flex, not just at the small breakpoint with .d-sm-flex.
Also, consider adjusting the flex direction at specific breakpoints like switching from column to row at the small breakpoint.

            <div class="d-flex flex-column flex-sm-row h-100">
                <div class="bg-gray p-2">
                    Menu
                </div>
                <div class="flex-grow-1 bg-blue p-2">
                    Content
                </div>
            </div>

If you're looking to incorporate a "hamburger" button, familiarize yourself with the .navbar component's Responsive behaviors and how to use .navbar-toggler along with External content. Need more guidance on this? Feel free to ask a new question.

Answer №2

I finally cracked the code with a little help from Arleigh Hix.

<div class="container-fluid p-0 h-100 bg-red">
    <div class="d-flex flex-column h-100">
        <nav class="bg-gray p-1">
            <ul class="nav">
                <li>Menu 1</li>
                <li>Menu 2</li>
            </ul>
        </nav>

        <div class="main flex-grow-1 bg-purple">
            <div class="d-flex flex-md-row flex-column h-100">
                <nav class="d-flex navbar-expand-md navbar-light bg-gray">
                    <div class="">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </div>
                    </div>
                </nav>
                <div class="flex-grow-1 bg-blue p-2">
                    Content
                </div>
            </div>
        </div>
    </div>


</div>

Take note that this vertical navbar intentionally lacks the .navbar class to avoid vertically centering the content. The use of only .d-flex (also found in the .navbar class) seems sufficient, in my opinion.

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 separate the date and time into individual components?

I have created a dynamic object that shows both the date and time. My goal is to figure out how I can separate the time portion from the date so that I can place it in its own HTML element and style it differently? JavaScript isn't my strong suit, e ...

javascripthtmldate

Can you help me with correcting the URL and making the necessary links?

<?php $res=$comments->result_array(); $i=1; $ar=array(); foreach($res as $row){ $a=array($i,$row['title'],$row['date_post'], $row['date_edit'], '<a href="edit_ ...

phphtmlcodeigniterurl

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: https://i.sstatic.net/kaRMO.png I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps- ...

javascripthtmlcss

Issues concerning date and time manipulation - Library Moment.js

As a beginner in JavaScript, I've been working on an activity that generates a table of train times based on user input. However, I'm facing issues with formatting the arrival time correctly. Whenever I input the arrival time in military format ( ...

javascriptjqueryhtmlmomentjs

Setting up a PHP email form for offline use

Here is the code I am currently working on: <?php if(isset($_POST['submit'])){ $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086d65696164486d70696578646d266b6765">[email protected]</a>"; // ...

phphtmlformsemaillocalhost

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

Is there a workaround available for setting the font-family to inherit in Internet Explorer 7?

I'm using a CSS class called "text_css" where I want to apply the inherit property. It's working correctly in IE8 and IE9, but I'm aware that it doesn't work in IE7. Does anyone have any suggestions for a workaround? ...

cssinternet-explorer-7

Decimal error causing Bootstrap grid column division issue

I've been attempting to divide the Bootstrap grid column into 20 grids using the code below: <div style="width: 4.999999998%; margin-top: -27.5px; margin-left: 25px;" class="col-md-.6 col-sm-6"> <div style="height: 32.5px; ...

htmlcssbootstrap-4

javascript various backgrounds on click

I have implemented a list to allow users to select their top 3 choices, and I am using JavaScript to track these selections and change the background color accordingly. 1st selection -> Green background 2nd selection -> Yellow background 3rd sel ...

javascriptcss

Tips for removing the default CakePHP CSS without deleting it from the default.ctp file

Currently, I am looking to enhance the design of my webpages individually using Bootstrap. The specific page I am focusing on currently utilizes the cake.generic.css stylesheet, but I am aiming to eliminate it from this particular page. Is there a way for ...

phpcsscakephpstylesbootstrap-4

Strategies for properly formatting a second line indent on lists with background bullets

I've set up an unordered list with bullet points created using FontAwesome, along with a background and border radius for added style. My issue is that I want the second line of text to align below the first one rather than under the bullet point. ...

csshtml-listsfont-awesome

Is it possible for a div element to maintain a fixed position even as its size changes

Looking to adjust the size of a ruler? In horizontal mode, the ruler expands and contracts as you resize it. However, in vertical mode, the ruler shifts left as you shrink it and right as you expand it. You can resize the ruler by dragging the small r ...

jqueryhtmlcsshtml5-canvas

Struggling to position search form to the right side of an <li> element

I'm having trouble aligning my search bar to the right side of the navigation menu items. HTML: <body> <div id="navbox"> <nav id="nav"> <ul id="nav"> <li><a href="#">Home< ...

htmlcssalignmentsearchbar

Mirror the image horizontally prior to saving

I'm working on a camera web app that has filters similar to Snapchat. I'm currently facing an issue where the image is mirrored because I'm using the front camera. Is there a way to flip the image before downloading it? Thank you for your re ...

javascripthtml

Every time I attempt to log in, the code keeps generating an error message net::ERR_EMPTY_RESPONSE. If successful, it should redirect to the

The code is producing a net::ERR_EMPTY_RESPONSE error when attempting to log in. The username and password are hardcoded. I simply want the admin to input their credentials on the Employee.html page, and if they match the ones in the main.js file, redirec ...

javascripthtmlnode.jsexpressbody-parser

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

I've been struggling with this issue for quite some time. Essentially, I am using a $http.post method in Angular to send an email address and message to post.php. The post.php script then outputs text based on the result of the mail() function. Howev ...

javascriptphphtmlangularjs

How can you ensure a cohesive visual style throughout various Razor and HTML views?

In my ASP.Net MVC 5 application, I have a Layout.cshtml and HTML view page included. However, I want to maintain a consistent look and feel across multiple views in the application. I am aware that this can be achieved by using a Razor view page with the f ...

htmlangularjsrazor

include a button next to the input field

As you reduce the browser window size, you may notice a different layout designed specifically for iPhone. One question that arises is how to add a button next to the search text box dynamically using JavaScript. The issue at hand is that the text box is b ...

javascriptjqueryhtmlcssjquery-ui

Refresh a DIV using two SQL queries in forms

I am encountering an issue with updating a single div element using the results from two different forms on an HTML page. I want either form1 or form2 to display results in the same div element, and it should be updated with one line of content fetched fro ...

javascriptphpjqueryhtmlsql

`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...

htmlcssflexboxalignmentcentering