Adaptable Bootstrap navigation bar

In the process of creating a responsive menu, I have designed a navbar for desktop that includes 3 text links and 3 small pictures that are also links.

However, when transitioning to a smaller screen size, my goal is to keep the 3 small pictures as they are, but transform the text links into a dropdown menu.

Below is the code I am currently using for the desktop layout:

<div class="container">
    <ul class="nav nav-pills">
        <li class="hidden-xs hidden-sm"><a href="#">Home</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Help</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Blog</a></li>
        <li><a href="#"><span class="search"></span></a></li>
        <li><a href="#"><span class="checkout"></span></a></li>
        <li><a href="#"><span class="home"></span></a></li>
    </ul>
</div>

This layout works well for larger screens.

My objective now is to reposition the top 3 items so that instead of being hidden on smaller screens, they are moved into a dropdown menu.

htmlcsstwitter-bootstrapresponsive-design

Answer №1

Check out the Working Fiddle Here!

I've built a dropdown menu that will appear specifically for sm and xs devices.

<div class="container">
    <ul class="nav nav-pills">
        <li class="hidden-xs hidden-sm"><a href="#">Home</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Help</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Blog</a></li>
        <li class="dropdown visible-xs visible-sm">
             <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown Menu <span class="caret"></span></a>
             <ul role="menu" class="dropdown-menu">
                <li><a href="#">Link 01</a></li>
                <li><a href="#">Link 02</a></li>
                <li><a href="#">Link 03</a></li>
             </ul>
         </li>
        <li><a href="#"><span class="search"></span></a></li>
        <li><a href="#"><span class="checkout"></span></a></li>
        <li><a href="#"><span class="home"></span></a></li>
    </ul>
</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

Customize CSS styles based on Angular material stepper orientation

Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...

cssangularangular-material

Change the location of an HTML element within the page structure

Let's consider having 3 elements like this: <h1>Hello</h1> <p>hello</p> <h1>Hello</h1> I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexib ...

javascripthtmlcss

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

As a newcomer to website development, I recently looked into implementing open graph on my site. However, I ran into an issue where I could only set one thumbnail for the entire website. This posed a problem as I wanted each navigation menu tab (Home, Abou ...

htmlangularangularjsfacebook-opengraphshare-open-graph

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

export function SignoutButton() { return ( <p onClick={() => signOut({ callbackUrl: "/" })}> <IoIosLogOut /> Logout </p> ); } I was struggling with a function in my next.js project that wasn't wo ...

javascripthtmlnext.jsonclick

What could be causing my jQuery to only toggle the first arrow in my HTML?

I am facing an issue with a series of divs generated from data, each containing an arrow that should toggle an expandable section. Strangely, only the first div is functioning properly: toggling the arrow icon and revealing the content upon click. When th ...

javascriptjqueryhtmlcss

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Hey there, I'm new to Blazor but familiar with C#. This is my first time asking a question here so please bear with me. :) I am working on a Blazor server-side application where users can enter information and validate it based on server data. So far ...

c#htmlasync-awaitblazorblazor-server-side

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

javascriptjqueryhtmlajax

The Zurb Foundation grid system is causing issues when trying to implement vertical tabs

My vertical tabs are giving me trouble when I try to nest grid or block elements, causing everything to overflow outside the element. For example, in the image below, the numbers 1,2,3 should be in the right section. <div class="row"> <div class ...

htmltabsgridzurb-foundationzurb-foundation-5

How to style HTML li elements to wrap like sentences within a paragraph

I am looking to format text list elements in a way that they wrap like sentences within a paragraph. Here is the accompanying HTML & CSS code snippet that demonstrates how li element behaves when it exceeds the width of the ul container. ul { ...

htmlcssword-wrap

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

CSS text wrapping will now occur on underscores as well as spaces and hyphens

I am facing an issue with long file names in my HTML formatting causing overflow. These file names use underscores instead of spaces, making it difficult to wrap them properly. For example: Here_is_an_example_of_a_really_long_filename_that_uses_underscore ...

cssword-wrapline-breaks

Position a component in relation to another component using AngularJS

Utilizing ng-show and ng-hide, I created a descriptive box that appears below text when clicked. However, there is an issue as the description box does not align directly under the text, similar to what is shown in this image https://i.stack.imgur.com/phBh ...

javascripthtmlcssangularjs

How can we use Python and Selenium to retrieve the text from HTML that includes the <p> tag?

I have a simple question that I hope you can help me with. I'm not feeling well and struggling to complete my presentation because my brain just isn't functioning properly. Here is the HTML code in question: <p> <b>Postal code:& ...

pythonhtmlpython-3.xselenium

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

I have a collection of images that I want to enlarge upon clicking. Here is what I currently have: <div class="gallery"> <div> <img src="content/imggallery/img1.jpg" class="oldimg" value="0"> </div> ...

javascriptjqueryhtmlimage

Enhance Your Website with HTML5 Video Transition Effects

Is it possible to recreate video transition effects using HTML5 similar to the ones shown in this example: Can this be achieved across all major browsers, including Safari, Firefox, Chrome, and IE9? ...

jquerycsshtmleffectstransition

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

The size of the Tweet button iframe is set at 107 pixels

Has anyone been able to successfully adjust the size of the tweet button generated by Twitter's iframe code? My attempts have resulted in a default width of 107px, but I need it to match the actual button size. I've tried adjusting the CSS proper ...

htmliframetwittershare

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

cssvue.jsvuetify.js