When resizing the window, navigation items vanish

I've implemented the collapse feature using Bootstrap, but encountered an issue where my nav elements disappear when resizing the window. Do you have any suggestions on how to fix this? Here's a snippet of my code: Navbar | Athletics 

    <nav class= "navbar navbar-expand-lg">
        <a class="navbar navbar-brand" href="#"> Athletics 
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHBhQIBxAVFRUXFxgbGRgXGB0WGBoXIxogHxodHSAaICgiHh4lIB0XITEhJSkrLi4uGh8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAMAAvgMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABwgEBQYDAgH/xABJEAABAwICBAUQCAUDBQAAAAABAAIDBAUGEQcSITFBUWFxkQgTFBYiMkJSVXKBk6GxstEjNDU2YnOiwRVDdIKSJMLw...

jqueryhtmlcssbootstrap-4

Answer №1

Your website is currently using Bootstrap styles for navigation. When you resize the window, the menu collapses and displays as a burger icon. If you prefer not to show the burger icon, add the "in" class below:

<div class="collapse navbar-collapse in" id="navbarNavAltMarkup">

If you want the default behavior with the burger icon, add the code below before the line mentioned above:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    </button><div class="collapse navbar-collapse" id="navbarNavAltMarkup">


<nav class= "navbar navbar-expand-lg">
        <a class="navbar navbar-brand" href="#"> Athletics 
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEA...</a>

<!-- toggle navigation
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
</button>-->
        <div class="collapse navbar-collapse in" id="navbarNavAltMarkup">
            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#"> Shop </a>
                <a class="nav-item nav-link" href="#"> About Us </a>
                <a class="nav-item nav-link" href="#"> Lookbook </a>

            </div>


        </div>

    </nav>

Answer №2

Bootstrap is designed to adjust the layout of larger elements on smaller screens.

To achieve this, you should include the navbar-toggle element and connect it to your navigation menu using 

data-target="#navbarNavAltMarkup"
. Additionally, ensure that your menu items are enclosed in li tags within a ul tag.

This structural arrangement will meet your requirements:

working jsFiddle

<nav class="navbar navbar-inverse navbar-static-top navbar-expand-lg" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="nav-brand" href="#"> Athletics 
            <img src="" width="30" height="25">
        </a>
    </div> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <ul class="nav navbar-nav">
          <li><a class="nav-item nav-link" href="#"> Shop </a></li>
          <li><a class="nav-item nav-link" href="#"> About Us </a></li>
          <li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
        </ul>
      </div>
    </div> 
  </div>
</nav>

If you want to disable this behavior, refer to Bootstrap 3 - disable navbar collapse

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

A clever JavaScript function generator encapsulated within an instant function nested within a jQuery ready statement

This code snippet features an immediate function enclosed within a jQuery ready function. $((function(_this) { return function() { document.write('called!'); }; })(this)); I am puzzled by where the resultant function ...

javascriptjqueryclosuresfactory

User controls in ASP.NET may not trigger the jQuery (document).ready() function

I wrote a jQuery function within my ASP.net user control that is not functioning as expected: <head> <title></title> <script src="~/Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language="javascript" ty ...

javascriptc#jqueryasp.net

"How can I make a dropdown open and close when a button is clicked, but also close when clicking outside of it at the same

One button click opens a dropdown, and it also closes when clicked outside. toggleAllCategories() { this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories }); } The issue arises when attempting to open and close the dropdown by clic ...

javascripthtmlreactjs

Guide to customizing action button color on MatSnackbar?

Currently, I am encountering an issue with the snackbar in my Angular 9 project. Despite adding CSS styles to both the component.scss file and the global style.scss file, the action button on the snackbar displays the same background and text color. In an ...

htmlcssangulartypesangular-material

The lengthy string is not breaking into separate lines as expected in Internet Explorer

My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...

css

Transition not influencing the scale property when activating a class

My modal is not scaling in and out properly when I toggle the 'active' class. It either fully scales out or scales in without any transition. Example: const openPopupButtons = document.querySelectorAll('[data-popup-target]'); const ...

javascripthtmlcssfrontend

Manipulate sibling elements using jQuery's addClass and remove methods

I have implemented a function that adds the class active to elements when they reach the top of the browser, ensuring that the next element will scroll in over the top. While this works smoothly in Chrome, I am encountering some jumping behavior when testi ...

javascriptjqueryhtmlcss

Using Jquery .ajax to Populate Select Dropdown with JSON Data

I have put in a lot of effort but I'm not seeing any results. My JSON data, created with PHP, looks like this (with the header sent before the data): {"users":[ {"id":"3256","name":"Azad Kashmir"}, {"id":"3257","name":"Balochistan"}, {"id":"3258","na ...

javascriptjqueryhtmlajaxjson

Revamp the button's visual presentation when it is in an active state

Currently, I'm facing a challenge with altering the visual appearance of a button. Specifically, I want to make it resemble an arrow protruding from it, indicating that it is the active button. The button in question is enclosed within a card componen ...

cssreactjstypescript

WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...

javascriptandroidhtmlcsswebview

Including hyperlink tags within a CSS file

Can you create internal links within a CSS file, like inserting a table of contents at the top where you can click on an item and immediately jump to that section in the CSS file similar to an anchor tag? This feature would be extremely handy for long CSS ...

htmlcss

Navigate up to the ancestor element before moving back to the previous two sibling elements using Xpath

Here is an example of HTML code: <span class="state"> <label class="state button start" ...>"Start"</label> </span> <span class="name tracker_markup"> <span class="labels pre ...

pythonhtmlxpathselenium-webdriver

The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Why is this not working correctly? I have included [email protected] A.css (css file that imports from a URL) @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin'); Ap ...

csswebpackless

The webpage is drifting sideways to the right without any content being displayed

Recently, I launched a new website and encountered an issue with a static page I designed. While it may not be a critical problem, it is certainly bothering me! If you want to check out the website in question, visit: In essence, I have used CSS to hide ...

htmlscrollbarhorizontal-scrolling

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...

htmlcsstwitter-bootstrap-3responsive-designnav

Eliminating the issue of double scroll bars that overlap each other

Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, bot ...

htmlcss

What is the best way to generate script code dynamically on an HTML page depending on the environment?

I am facing a challenge with my asp.net application. I need to insert a dynamic script into the html section, and this script's value must change depending on the environment (TEST, QA, etc.). To illustrate, here is the script where DisplayValue is th ...

javascripthtmlasp.net

Using jQuery to replace the value of a button with a variable string that has been concatenated

I am facing a dilemma with a button on my webpage. The value displayed on the button is a combination of variables and strings, like so: $('#btn1').attr('value','question'+currid+'ans1').button('refresh'); ...

javascriptjqueryvariablesbuttonjquery-mobile

Chrome Flexbox Hacks: Controlling the Size of Nested Items

How can I ensure that an element nested within a flexbox member in Google Chrome is limited to the size of its container? For example, consider the following scenario: <div style="display:flex; flex-direction:column; height:100vh;"> <div style= ...

htmlcssgoogle-chromeflexbox

Tips for displaying Vue Components on an HTML5 canvas surface

How can I incorporate an htmlcanvas as the webpage background and overlay Vuejs components on top of it? I know the answer must exist, but I'm not sure where to start looking. ...

javascripthtmlvue.jshtml5-canvaspaperjs