The comparison between Bootstrap 4 collapsible and expanded menus

Forgive me if this question has already been asked (I'm still new to all of this and learning, finding the answer in search is challenging).

I'm attempting to create a collapsible navbar that, when expanded, displays items separated by a "|" symbol (or border right), but when collapsed into a hamburger button, the "|" separators should not be visible.

Currently, the separators appear. See code below and links to images: Collapsed view (want to remove the '|':

https://i.sstatic.net/1Ahc8.png

Expanded view (want to keep the '|' or something similar):

https://i.sstatic.net/fXil0.png

<nav class="navbar navbar-expand-md navbar-dark sticky-top">
                    <button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navvy">
                        <span class ="navbar-toggler-icon"></span>
                    </button>
                    <div class ="collapse navbar-collapse navbar" id ="navvy">
                        <ul class ="navbar-nav">
                            <li class="nav-item white"><a class="nav-link active navbar-brand " id ="Overview" href ="overviewpage">Overview</a>|
                            </li>
                            <li class="nav-item white"><a class="nav-link active navbar-brand " id ="CS50-nav"  href ="cs50page" style="border-bottom: solid 1px white">CS50</a>|
                            </li>
                            <li class="nav-item"><a class="nav-link active navbar-brand " id = "Portfolio" href ="Portfoliopage">Portfolio</a>
                            </li>
                        </ul>
                    </div>
                </nav>

Any assistance is greatly appreciated!

htmlcssbootstrap-4navbar

Answer №1

If you want to customize the display of elements based on different screen sizes, you can utilize media queries in your CSS. For instance, in the following code snippet I have implemented borders for desktop view only.

Moreover, you can make use of bootstrap helper classes to show or hide elements specifically on mobile or desktop screens. Refer to https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements for more details.

I trust this information proves beneficial! 😀

#navvy>ul.navbar-nav>li {
  display: inline-block;
  width: 100%;
}

/* Desktop versions*/

@media (min-width: 1025px) {
  #navvy>ul.navbar-nav>li {
    width: initial;
    list-style-type: none;
  }
  #navvy>ul.navbar-nav>li>a {
    border-right: 1px solid #666;
    padding-right: 1em;
    margin-right: 1em;
  }
  #navvy>ul.navbar-nav>li:last-child>a {
    border-right: 0;
  }
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark sticky-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navvy">Menu</button>
  <div class="collapse navbar-collapse navbar" id="navvy">
    <ul class="navbar-nav">
      <li class="nav-item white"><a class="nav-link active navbar-brand " id="Overview" href="overviewpage">Overview</a>
      </li>
      <li class="nav-item white"><a class="nav-link active navbar-brand " id="CS50-nav" href="cs50page" style="border-bottom: solid 1px white">CS50</a>
      </li>
      <li class="nav-item"><a class="nav-link active navbar-brand " id="Portfolio" href="Portfoliopage">Portfolio</a>
      </li>
    </ul>
  </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

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

javascriptjqueryhtmlcsstwitter

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

After the first 3 pages with a black background and a transparent navbar with white navigation items, I encounter visibility issues when scrolling to the colorful 4th page. Is there a way to change the navbar color on this specific page using ONLY HTML a ...

htmlcsscolorsresponsive-designnavbar

Showing a PHP echo statement in an HTML div with the help of jQuery

I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...

phpjqueryhtmlajaxcordova

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...

htmlcsscss-transitionscss-animations

Cause a bootstrap column to have overflowing content rather than expanding

I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet. My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list ...

htmlcssbootstrap-4

Transforming HTML with JavaScript

I am facing a challenge in my JavaScript application where I receive HTML code from an endpoint that contains radio buttons. Unfortunately, I cannot modify the HTML content coming from this endpoint. My goal is to convert these radio buttons into regular b ...

javascriptjqueryhtml

Steps to correct alignment in a numbered list when the dot is removed using CSS

Currently, I'm working on developing a rule page for a game. The specific layout requirements dictate that the rules be presented in an ordered list without periods following each number: 1 Rule one 2 Rule two 3 Rule three To achieve this format ...

htmlcsshtml-lists

Does the icon vanish once you alter the button's color?

Warning: Adult content Check out this website: link When you visit this page, you'll notice that the Add to Cart button is orange. The button also has an icon of a shopping cart. This icon only appears if you remove the following code. To make th ...

htmlcss

Maintaining Object Position in 2D Transforms

I am trying to create multiple perspective-transformed rectangles in the lower right corner of a canvas by using ctx.transform: ctx.transform(1, 0, -1, 1, 10, 10). My goal now is to adjust the size of the drawing based on a variable scale=n, while keeping ...

javascripthtmlcsscanvastransform

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: https://i.sstati ...

htmlcssreactjsmaterial-ui

What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated som ...

javascripthtmlcss

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

cssreactjsmaterial-ui

Enter information into the TextArea and jQuery dialog

I require assistance in populating a textarea with data obtained from querying a database. I have a jQuery dialog that contains another dialog, inside of which is a textarea. Here is some pseudocode: <MODAL> <modalB> <TextArea>s ...

javascriptjqueryhtml

Error with @media in Webpack 3 and Bootstrap 4

Currently, I am facing an issue while trying to use React, Typescript, Webpack 3, and Bootstrap 4 to develop a simple project. The problem arises when I import bootstrap.css in my main .tsx file as I encounter an error stating Unexpected Symbol - @ - in /n ...

reactjswebpackbootstrap-4

What is the best way to align a div in the middle of an input-group div?

When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space. This is the desired layout I want to achieve regardless of the n ...

htmlcssbootstrap-5

What is the best way to align icons in the center alongside text or paragraphs using react?

I'm struggling with centering my icons like <GrTools size="30px"/> next to my text. It's causing some alignment issues with my styled components. Here is my JavaScript: <div id='paragraph' className="container"> ...

htmlreactjscenterreact-icons

Prevent clicking until the IE 10 and 9 windows have fully loaded

My goal is to prevent clicking on an image element until all the resources have finished loading, enabling the click only after the window.load() or when document.readystate reaches complete status. While this code works well in Chrome and Safari, I am fac ...

jquerycssinternet-explorerclickpointer-events

Is it possible for browser sync to replace a CSS file hosted on a CDN upon injection?

Trying to solve a dilemma with my Shopify theme. Working on my Shopify theme, I find it frustrating that I have to constantly save my CSS changes, switch tabs, and reload the browser to see updates. While I know about the theme gem, it doesn't provid ...

cssgulpshopifybrowser-sync

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

javascripthtmldomreactjs