Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops.

The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, I currently have one row with col-x-12 for the top navigation bar and another row with col-x-12 for the content below.

However, when attempting to implement side-by-side columns (col-2 and col-10) for desktop sizes, I encounter difficulties due to the two rows not being able to sit side by side. I also tried a single row approach with two columns, using col-md-12 col-lg-2 for the navbar and col-md-12 col-lg-10 for the content.

Yet, I am uncertain if it is advisable to have two col-12 columns within a single row. Therefore, I am seeking guidance on the correct approach for building this responsive navbar. Your help is much appreciated!

htmlcsstwitter-bootstrapresponsive

Answer №1

Do you need a solution to your problem?

You might consider creating two different div elements - one for desktop screens (containing the sidebar) and one for mobile screens (with the topbar).

<div class="d-lg-none">This will be hidden on larger screens</div>
<div class="d-none d-lg-block">This will be hidden on smaller screens</div>

Check out this link for more information: https://getbootstrap.com/docs/4.3/utilities/display/

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

"Enjoy a full-screen background that adjusts its height while you scroll

Here is how my HTML elements are nested: body { app-root { app-block-page { app-block-content { div.wrapper { *content* } } } } } body has width:100% and ...

htmlcssscrollbackground-color

Adding HTML components to an image with adjustable dimensions

A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...

htmlcssimageresponsive-designscaling

Using jQuery to update a specific item in a list

My current project involves developing an Image Gallery app. It uses <img> tags within li elements. The code snippet is as follows: var $slideR_wrap = $(".slideRoller_wrapper"); var $slidesRoller = $slideR_wrap.find(".slidesRoller"); var $slideR ...

javascriptjqueryhtmlcss

What is the proper way to utilize xpath for locating an element that has two specific descendants?

I'm faced with a challenge involving an unordered list of dynamically generated list items, each containing labels and values. My goal is to validate that the list includes a specific label with a specific value. I'm grappling with crafting an x ...

htmlxpathprotractor

Create a JavaScript array by extracting IDs from an HTML document

Looking to create a function that randomly selects an image defined in HTML code. I've opted to create an array to store all used images and have the function pick from there. Is there a simpler way to define the array or should I skip using it altog ...

javascripthtmlarrays

Can we define a style or CSS for one element depending on the characteristics of another element?

One challenge I'm facing involves a 3rd party library (fullcalendar) that automatically sets the height of elements based on internal calculations to ensure they look good in any viewport: <div style="height: 72px;"> Unfortunately, not all ele ...

htmlcss

Eliminate any excess space to the right of the image

Utilizing Bootstrap alongside React, I've encountered an issue with images causing unwanted whitespace to the right. I've thoroughly examined the elements but have been unable to resolve this issue. Despite researching Bootstrap Col online, the ...

htmlcssbootstrap-4react-bootstrap

CSS - Yet another perplexing question that shouldn't have arisen

While working on building this website in CSS, I hadn't encountered any major issues up until now. Suddenly, I'm facing a problem with basic positioning within my body-3 class div. Instead of pushing it downward and elongating the page as expecte ...

csshtml

Exploring the Power of Selenium in Python: Automating the Clicking of Expand Links Without Identifiers

Struggling to fill out a form in IE9 using Selenium and Python. The form is loaded with 'Expand/Collapse' links, all identical except for the text labels. No ID on them, just 'style' and 'onclick' attributes (though there migh ...

pythonhtmlseleniumexpand

Placing text to the right of an image inside an <li> tag

Struggling with a simple alignment issue in my code and just don't have the time to figure it out. I have two lists, each containing images and text, but I need the text to align to the right of the images instead of wrapping underneath. Here is an ex ...

htmlcsstwitter-bootstrap

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Ways to determine if an element has exceeded its container's boundaries

After creating the codesandbox, I have developed a webapp that heavily relies on user input. To keep it simple for demonstration purposes, I am displaying various authors on an A4 formatted page using `page` and `font-size` with the `vw` unit for responsiv ...

javascripthtmlcssvue.jsvuejs2

The redirection from HTTP or www to HTTPS is not functioning as expected

Redirecting all links to my website to the https:// domain is supposed to work flawlessly, but there are certain ways it doesn't quite function as expected. https://www.example.com --- works example.com --- works www.example.com --- encounters issu ...

javascriptjqueryhtml.htaccess

Saving a dynamically generated table in a PHP session to display every time the current user logs in

This specific table is generated based on the user's selection of values in the drop-down menus. How can we store this dynamically generated table in a session so that it appears every time the current user logs in? <table border="0" class="table ...

phphtmlsession

Showing information in a table on a webpage using JavaScript and HTML

After running a console log, I am presented with the following data: 0: {smname: "thor", sim: "9976680249", pondo: "10"} 1: {smname: "asd", sim: "9999999999", pondo: "0"} 2: {smname: "asd", sim: "4444444444", pondo: "0"} 3: {smname: "bcvb", sim: "78678967 ...

javascripthtmlhtml-table

Are there any reliable PHP classes available to generate HTML tables efficiently?

Searching for an advanced PHP class that can effortlessly create intricate HTML tables, including the ability to handle colspan/rowspan and assign specific CSS classes to rows, columns, and cells. ...

phphtmlhtml-table

I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS. The desired struct ...

htmlcss

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

javascripthtmlcssckeditor

What is the best way to ensure these elements are neatly stacked one on top of the other?

Is there a way to center this text div while keeping it behind a fading image on the page? I've tried using margin-left: auto; and margin-right: auto; but it doesn't seem to work. Am I missing something? I'm testing everything in Chrome, ju ...

htmlcssalignmentcenter

Angular.js fails to load successfully every other time

My angular application is running into some issues with bower. At times, when I start up the server, I encounter the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to in ...

javascriptjquerynode.jsangularjstwitter-bootstrap