Bootstrap - A collapsed navigation button that remains fixed without the rest of the navbar

I'm currently working on a responsive drag and drop game that utilizes Bootstrap and jQuery UI.

Within the game, I have implemented a collapsible navbar at the top of the page. To optimize space for buttons at the bottom, I am looking to hide the navbar while keeping the toggle button fixed in the corner of the screen.

Check out this screenshot of the page: https://i.sstatic.net/Xt9cq.png

The challenge I faced was ensuring that the navbar remained transparent and fixed so that the polygon behind it could still receive dropped elements. Additionally, I needed to prevent scrolling as it would interfere with the drag and drop functionality.

Here is the code snippet involved:

<nav role="navigation" class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="navbar-brand" href="index.php">Connaissez vous Sain<i Style="color: #B34; font-size: 28px" class="fa fa-map-signs" aria-hidden="true"></i>é ?</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li ><a href="index.php"><span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a></li>
                <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                     role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt"></span>
                     Menu <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="quartiers.php">Noms des Quartiers</a></li>
                        <li><a href="#">Centres des Quartiers</a></li>
                        <li><a href="#">Points d'interets</a></li>
                        <li><a href="#">Land Marks</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-envelope-o"></i> Contact</a></li>
            </ul>
        </div>
</nav>

Update:

After some tweaking, I came up with a simple CSS solution:

    nav {
        position: fixed;
        top: -60px;
    }

    .navbar-toggle {
        position: relative;
        top: 60px;
        z-index: 10;
    }

Here's what the updated design looks like: https://i.sstatic.net/vl043.png

jqueryhtmlcsstwitter-bootstrap

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
/* @Media query for mobile only may be needed here */
.navbar-brand{
  display: none;
}
.navbar{
  float: right;
}
</style>
</head>
<body>

<nav role="navigation" class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="navbar-brand" href="index.php"><i Style="color: #B34; font-size: 28px" class="fa fa-map-signs" aria-hidden="true"></i></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li ><a href="index.php"><span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a></li>
                <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                     role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt"></span>
                     Menu <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="quartiers.php">Noms des Quartiers</a></li>
                        <li><a href="#">Centres des Quartiers</a></li>
                        <li><a href="#">Points d'interets</a></li>
                        <li><a href="#">Land Marks</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-envelope-o"></i> Contact</a></li>
            </ul>
        </div>
</nav>

<script>

$( ".navbar-toggle" ).click(function() {
  if($( "#navbar" ).hasClass( "in" )){

    $('.navbar').css('float','right');
  }else{
  
    $('.navbar').css('float','none');
  }
});
</script>
</body>
</html>

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

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

Insert image using AJAX

I am attempting to use Ajax to dynamically add an <img> element to a div on my webpage. The image's name needs to be fetched from a database. Although I have successfully added the <img> tag to the div and set the correct source (src) att ...

javascriptjqueryhtmlcssajax

Ways to notify Google that this content is integrated into a different article

Following each article on my website, there are random previews for other articles. However, these previews are quite large, featuring a headline, subheadline, and six rows of text. This has caused confusion as Google sometimes mistakes them for being part ...

htmlseoweb-crawlergoogle-crawlers

After the ajax request finishes loading, use jQuery to insert a value into an input text element

I am developing an application that utilizes multiple forms loaded through AJAX requests. Let's say my main file is index.html. Within this file, various forms are dynamically loaded using AJAX calls. My goal is to determine if a specific text input ...

jqueryajax

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...

javascriptjqueryhtmlweb

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

What is the best way to ensure that my pictures are only visible within a modal box?

I've set up a modal box called sectors with two subcategories: publication and food. Each subcategory is linked to a div that contains an image. My goal is to hide the image inside the modal box and display it on the screen once the box is closed. ...

javascriptjqueryhtmlcss

What is the best way to make a panel width adjust automatically to fit the screen width?

I have developed a React/Material UI application that includes a Portal which showcases a Panel and a Widget. Main App: Show Portal and Set Background Color to Blue export default function App() { return ( <div style={{ backgroundC ...

htmlcssreactjsflexboxmaterial-ui

Highcharts is experiencing a duplication issue with the Y-Axis Series

This is a snippet from my code: $.get('https://dl.dropboxusercontent.com/u/75734877/data.csv', function (data) { var lines = data.split('\n'); $.each(lines, function (lineNo, line) { var items = line.split(',& ...

javascriptjqueryhighcharts

Tips for displaying an image that is embedded within a CSS file

I discovered an interesting background image embedded in a CSS file. Is there a way for me to actually view it? "iVBOR..." to "5CYII=" and saved it in a file named image.png - unfortunately, this method did not yield the desired outcome.</p> ...

cssimagepngembedded-resource

How can I extract information from an HTML element using its ID in JavaScript?

Can anyone please help me retrieve the date using JavaScript from the following div: <div id="popupDateFieldMin" class="dateField">2017-08-02</div> Below is the code snippet I am currently using: var cal = document.getElementById( 'popu ...

javascripthtml

jQuery concealing selections from dropdown menus

Is there a way to use jquery sort to order dropdown list options and hide the "select" item in the dropdown? Check out my fiddle code here <select id="mySelect"> <option value="">select</option> <option value="1">a</opt ...

jqueryhtmlsortingselecthide

What are the ways to personalize the material UI select component?

I am looking to customize a MUI select component that I have rendered on a dark background. My goal is to make the outline and all its contents light colors, specifically grey and white. https://i.sstatic.net/HFUBj.png So far, I have successfully changed ...

cssreactjsmaterial-ui

What could be the reason for an ASP.NET Core application not loading within an iframe on the same domain?

I am facing an issue with my ASP.NET Core MVC website, which is embedded as the src of an IFRAME within a portal. Both the portal and the .NETCore application share the same domain (e.g., site.portal.domain / portal.domain). Upon entering the portal, I en ...

htmlasp.net-mvcasp.net-coreiframe

What is the best way to position a div at the bottom of a web page?

I have a question that may seem basic, but I've been struggling to find a solution. Despite searching for answers, none of the suggestions I've come across have worked for me. My application has two main containers - a header and a content div. T ...

cssangularjstwitter-bootstrap

Is there a way to verify if JQuery libraries (and other files containing custom code) have been properly included?

So I've got this JavaScript file with some code that relies on JQuery libraries. How can I make sure that both the file and the libraries are properly included? (I hope this question isn't too silly.) ...

javascripthtmljqueryframeworks

Optimal approaches for managing form processing duties

What is the most effective approach to handle form processing? In my situation, I typically follow these steps: If the user has not submitted the form, Display the form Otherwise, If there are any form errors, Show error messages Display the form ...

phphtmlforms

Unlocking the potential of Vue within shadow dom environments

I am facing an issue with a shadow DOM that includes the root element and a Vue component. <template> <div class="container"> <div id="app"></div> </div> <script src="http://my-site.com/app/js/vue-compo ...

javascripthtmlvue.js

Troubleshoot the reason behind the malfunctioning Console log on the website

I have been troubleshooting why console.log is not printing anything. I have tried defining and enabling debugger mode, but nothing seems to work. https://i.sstatic.net/5clXf.png Check out the website here: Any suggestions on how I can resolve this issu ...

javascriptjquery

Clicking on a different texture/image allows for the texture to change in Three.js

I am working on creating a 360 image view using Threejs. I have a total of 4 images, with one linked to Threejs and the other 3 displayed as thumbnails at the bottom of the page. When a thumbnail is clicked, the 360 image view should change accordingly. Y ...

javascriptjqueryhtmlcssthree.js