Prevent certain elements in Bootstrap navbar from collapsing

I am currently working on designing a Bootstrap navbar that features the navigation items on the left side and the social/contact icons on the right. My goal is to have the nav items collapse when needed, but have the social/contact items remain visible for easy access on mobile devices.

After researching solutions for similar issues, I discovered that Bootstrap v4 is not backward compatible, rendering previous solutions ineffective.

My code structure appears to be straightforward. Placing the social/contact items in a separate div outside the collapse div results in a strange layout. However, when I include them within the collapse div, they align correctly. Unfortunately, they collapse along with the nav items, which is not the desired outcome. I attempted to adjust the flex parameters without success.

In an ideal mobile view scenario, I envision having only the social/contact icons and the hamburger menu button displayed on the right side.

#phone-number {
  padding: 0 1em;
  font-weight: bold;
}

.navbar-right {
  flex-direction: row;
}

@media (max-width: 767px) {
  #phone-number {
    display: none;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <div class="navbar-nav mr-auto mt-2 mt-lg-0">
      <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
    </div>
  </div>
  <div class="nav navbar-nav navbar-right">
    <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a>
  </div>
</nav>

<br/><br/><br/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <div class="navbar-nav mr-auto mt-2 mt-lg-0">
      <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
    </div>
    <div class="nav navbar-nav navbar-right">
      <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a>
    </div>
  </div>
</nav>

csstwitter-bootstrapnavbarbootstrap-4

Answer №1

See below for the solution, I hope it assists you. Thank you.

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  <style>
    .nav-colapse{float: left;flex-basis: 70% !important;}
    #phone-number {
      padding: 0 1em;
      font-weight: bold;
    }
    
    .navbar-right {
      flex-direction: row;
    }
    
    @media (max-width: 767px){
      #phone-number {
        display: none;
      }
      .nav-colapse{flex-basis: 100% !important;}
    }
  </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a> 
        <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse nav-colapse" id="navbarTogglerDemo02">
            <div class="navbar-nav  mt-2 mt-lg-0">
                <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
                <a class="nav-item nav-link" href="#">Link</a> 
                <a class="nav-item nav-link" href="#">Disabled</a>
            </div>
        </div>
        <div class="nav navbar-nav navbar-right nav-social">
            <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
            <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
            <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
            <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
            <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
        </div>
    <br/><br/><br/>

    </nav>
</body>
</html>

I'm not sure why there's an error here, it seems to be working fine. Please check the fiddle for a live example: [https://jsfiddle.net/radiantahmed/q2yysw7u/][1]

Answer №2

Include nav navbar-nav navbar-right after the button and then #navbarTogglerDemo02

View the functional fiddle here: https://jsfiddle.net/j2pwtj5x/

  <style>
    #phone-number {
      padding: 0 1em;
      font-weight: bold;
    }
    
    .navbar-right {
      flex-direction: row;
    }
    
    @media (max-width: 767px){
      #phone-number {
        display: none;
      }
    }
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="nav navbar-nav navbar-right">
      <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
      <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
      <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
    </div>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <div class="navbar-nav mr-auto mt-2 mt-lg-0">
        <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
      </div>
    </div>
    
  </nav>

<br/><br/><br/>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <div class="navbar-nav mr-auto mt-2 mt-lg-0">
        <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a>
      </div>
      <div class="nav navbar-nav navbar-right">
        <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
        <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a>
        <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
        <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
        <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
      </div>
    </div>
  </nav>

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

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

htmlcssreactjstypescriptfrontend

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

javascriptcssvue.jsquasar-framework

What is the best way to integrate bootstrap modal forms using django-crispy-forms without causing a page refresh?

Recently, I've been working on setting up a form within a bootstrap modal using django-crispy forms and class-based views. While looking into incorporating Ajax functionality, I found several examples that weren't entirely clear to me. I tested ...

jquerydjangoajaxbootstrap-4django-forms

Tips for creating a responsive CSS component within a q-card while adding content

Utilizing vue and quasar, I have created this component: <template> <q-layout> <q-page-container style="background-color: #e0e5ea;"> <q-page class="column"> <menu-bar></menu-bar> ...

htmlcssvue.jsquasar-frameworkquasar

Utilizing event delegation for JavaScript addEventListener across multiple elements

How can I use event delegation with addEventListener on multiple elements? I want to trigger a click event on .node, including dynamically added elements. The code I have tried so far gives different results when clicking on .title, .image, or .subtitle. ...

javascripthtmlcssevent-delegation

Toggle between bold and original font styles with Javascript buttons

I am looking to create a button that toggles the text in a text area between bold and its previous state. This button should be able to switch back and forth with one click. function toggleTextBold() { var isBold = false; if (isBold) { // Code t ...

javascripthtmlcss

What steps can I take to use CSS to disable a webpage?

Is there a way to create a disabled web page using CSS where users cannot click on any content and only view the content below the screen? ...

css

Is there a way to dynamically assign the background color of a webpage based on the exact width and height of the user's screen?

I have customized the CSS of my website by setting the height to 800px and width to 1050px. Additionally, I have chosen a blue background-color for the body tag. It is important that the entire application adheres to these dimensions. However, when viewe ...

asp.netcss

Tips on extracting code differences from code inspector

Utilizing the Chrome code inspector is extremely valuable, but I often find it challenging to track the modifications made to CSS and HTML live. This becomes particularly cumbersome when there are multiple tags being modified. Are there any Chromium exten ...

javascripthtmlcsschromiumweb-inspector

Adjust the height of a responsive div to match its adjacent element

Two of my divs are set to specific widths using percentages. I'm looking for a way to make the right div match the height of the left div, which changes based on the dimensions of an image and the browser window size. Is there a method to achieve this ...

javascripthtmlcss

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...

javascriptjquerycss

The functionality of the Bootstrap toggle button seems to be malfunctioning

I'm having trouble with the toggle button in my Bootstrap code. When I resize the window, the toggle button appears but clicking on it doesn't do anything. This is my first time using Bootstrap, so I might have made some silly mistake. Any assist ...

javascriptjquerytwitter-bootstrapdrop-down-menutoggle

Aligning multiple items to the right using Flexbox

While it's common knowledge how to align one item to the right in flexbox, what about aligning multiple items, like the last two elements, to the right and the rest to the left? Take a look at this example where I want elements with the class .r to be ...

htmlcssflexbox

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

Resolved issue with maintaining scroll position after adjustments to scroll height

Currently, I am in the process of creating a chatroom that includes pagination. The issue I am encountering is related to loading old messages when the scroll height reaches 0. However, unlike platforms such as Facebook and Slack, even when the scroll he ...

javascripthtmlcssreactjsnext.js

Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle. span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; ...

htmlcss

Display an additional div when hovering over form input

I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hove ...

htmlcss

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

htmlcsssvg-animate

What is causing this regular expression to not find any matches in the VSCode search and replace function?

Currently utilizing VSCode for my code editing needs. https://i.sstatic.net/49OmA.png Displayed below is a screenshot illustrating the search options I have chosen: https://i.sstatic.net/ILcNv.png The regex expression I'm attempting to use functio ...

cssregexvisual-studio-codehtml-email

Is it possible to conceal a form field until a previous field has been completed?

Looking for a way to hide a form field until another field is properly completed? I have a divided registration form and want the second field to appear only when the first one is valid. Preferably using CSS3, with HTML5 and maybe some JavaScript if necess ...

javascripthtmlformscss