Large nav-stack that transitions to a horizontal layout when below 768px wide

I'm currently utilizing TBS and have configured my layout with three columns: a vertically stacked navigation on the left, main content in the center, and a Twitter feed on the right. My goal is to have the navigation display as stacked on larger screens, shift to horizontal on resolutions of 768px or below, and return to a stacked layout when the menu toggle is activated.

Here is the HTML code I am working with, using the standard Bootstrap stylesheet:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-tabs nav-stacked" style="font-weight: bold; font-size: 16px">
            <li><a href="#Fencing">Home</a></li>
            <li><a href="#Fencing">Beers and Ales</a></li>
            <li><a href="#Fencing">Eating</a></li>
            <li><a href="#Fencing">What's On</a></li>
            <li><a href="#Fencing">Find Us</a></li>
            <li><a href="#Fencing">Contact Us</a></li>
        </ul>
    </div>
</nav>
htmlcsstwitter-bootstrap

Answer №1

There may be a way to achieve this effect using Jquery instead of just Bootstrap CSS. By adding and removing classes based on the width, you might be able to customize your layout.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />


<script type="text/javascript"> 
$(window).resize(function () 
{ if ($(window).width() <= 1000) 
{ if ($(".nav").hasClass("nav-stacked")) 
{ $('.nav').removeClass('nav-stacked'); } 
} else 
{ if (!$(".nav").hasClass("nav-stacked")) 
{ $('.nav').addClass('nav-stacked'); 
} } 
});</script>' 


   <nav class="navbar navbar-default " role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span></button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav nav-tabs nav-stacked" style="font-weight: bold; font-size: 16px">
                        <li><a href="#Fencing">Home</a></li>
                        <li><a href="#Fencing">Beers and Ales</a></li>
                        <li><a href="#Fencing">Eating</a></li>
                        <li><a href="#Fencing">What's On</a></li>
                        <li><a href="#Fencing">Find Us</a></li>
                        <li><a href="#Fencing">Contact Us</a></li>
                    </ul>
                </div>
            </nav>

http://www.bootply.com/uK0UrlBTKL

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

Steer clear of moving elements around in d-flex or similar layouts

I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered. https://i.sstatic.net/kVc8l.png For example, the element ...

htmlcsstwitter-bootstrapbootstrap-5

Mobile devices are not showing the fixed header correctly

Recently, I was requested to lend a hand with a certain website: www.backincontrolbook.com Interestingly, when viewed on a PC browser, everything appears as intended. However, switching over to a mobile device (iPad and iPhone specifically), the header de ...

htmlwordpressmobileheader

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging. The select element in qu ...

htmlcssformscss-animations

I keep getting redirected to a blank page by JS

I've created a JavaScript script that smoothly fades in the page when a user enters it and fades out when they click a link to another page. The script is working as intended, but I'm facing an issue with anchor links on the page. Whenever I clic ...

javascriptjqueryhtml

Check if text is being added to an input field using jQuery and then execute a specified function

My input field has the readonly attribute set by HTML, and I am populating text into it using jQuery's .html() method: <input type="text" id="myField" readonly="readonly" /> I have a function called myFunction() th ...

htmljqueryjquery-events

Execute a function when a selection option is chosen consecutively two times

I have a dynamic dropdown menu that uses AJAX to load options. I need the function to be triggered not only when an option is changed, but also when the same option is clicked multiple times in a row. In other words, I want the function to run every time a ...

javascriptjqueryhtml

How can I create my own custom pagination and sorting features instead of relying on the default ui-bootstrap options?

Can anyone provide assistance with resolving conflicts I am experiencing while using ui-bootstrap? ...

htmlangularjstwitter-bootstrap

What could be causing the a element tag to not affect the links? Is the syntax correct?

Why aren't my CSS properties affecting the links in my navigation bar? I want the styling to apply only to the links inside the #nav id, but it doesn't seem to be working. Can anyone help me figure out what the issue might be? CSS CODE: a#nav:l ...

htmlcssnavigation

The Use of File Object in Internet Explorer Version 10

My experience with using the html input type=file element to retrieve files using document.getelementbyid("..").files has been successful in Chrome and Firefox, but unfortunately, I am facing issues with Internet Explorer 10. Despite researching various bl ...

javascriptjqueryhtmlinternet-explorer-10

The CSS file fails to connect with the HTML document

As I delve into the world of web design, I've encountered a simple issue that has me stumped. I created a basic example page with both documents residing in the same folder. Oddly enough, the snippet works perfectly when viewed here, but fails to func ...

htmlcss

The menu does not adjust to fit the site properly, causing the video/photos to appear off to the right on smaller screens

Earlier, I received some fantastic help for which I am extremely grateful. However, I find myself in need of your expert assistance once again. The website I am currently working on is . After simplifying the code and removing absolute positioning, I enco ...

csshtmlscale

Ways for enabling the user to choose the layout option

I am looking to develop a customized reporting system where users can select the specific fields they want to include in the report as well as arrange the layout of these fields. The data for the reports is sourced from a CSV file with numerous columns. Us ...

javascriptjqueryhtmlarrays

Creating a seamless vertical navigation that connects the top banner with the bottom footer section

Having some difficulties with my current assignment. Any assistance would be greatly appreciated, whether it's a minor error I've overlooked or if I'm completely off-base with my code. The main challenges I'm facing involve getting my ...

html

Attempting to implement a disappearing effect upon submission with the use of JavaScript

I am currently working on implementing a disappearing form feature for a small web application. The idea is that once the initial form is submitted, it will be replaced by a new form. While my current code somewhat works, it only lasts for a brief moment b ...

javascripthtml

Switching the parameter to navigate to the appropriate page

Hi there, I'm looking to implement a quick change using the onchange parameter. Can someone assist me in using the onchange parameter to navigate to a new page? So, if someone selects for instance Basic info, they will be directed to a new page custo ...

javascripthtmlonchange

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

javascriptjquerycssdrag-and-drop

Disabling the scrollbar on a modal and enabling it on a custom div within the modal

Looking to create a bootstrap modal with a unique layout? Interested in having two columns that can be scrolled separately? body, html { font-size: 10px } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

csstwitter-bootstrapbootstrap-modalbootstrap-5

Facing continuous 404 errors while working with nodejs and express

While attempting to collect data from a local host webpage's registration form that captures user information, I encounter an issue upon pressing the submit button A 404 Error is displayed stating "page not found", preventing the collection and out ...

javascripthtmlnode.jsexpressbody-parser

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Every time I attempt to run node commands or create a new Angular project, I encounter the following error. Node version 20.11.0 NPM version 10.2.4 https://i.sstatic.net/Dg6BU.png https://i.sstatic.net/ZwN1Q.png ...

javascripthtmlnode.jsangularnode-modules

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

Encountering an issue with the Selenium Webdriver where it throws an error stating that the element is not visible and cannot be interacted with when attempting to access a textarea. 1. The textarea is located within a pop-up window, which can be accessed ...

javascripthtmlseleniumselenium-webdriver