Tips for creating gaps between list items in a collapsible navbar

I am attempting to add spacing between the li items in my collapsible navbar

However, the issue arises when I slightly minimize the browser window, causing the navbar to collapse incorrectly. See image below:

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

Below is the code that I have used:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar navbar-default navbar-static-top" style="padding-top:5px !important; padding-bottom:5px !important; margin-left:auto; margin-right:auto ;max-width:1135px">
  <div class="container">
    <a href="#" class="navbar-brand" style=""> <span style="font-weight:bold;">HELLO</span></a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#" ><span style="font-weight:bold; margin:40px">choice1</span></a></li>
        <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice2</span></a></li>
        <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice3</span></a></li>
        <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice4</span></a></li>
        <li>
          <a href="#" data-toggle="dropdown" onclick="document.getElementById('form-connect').style.display=(document.getElementById('form-connect').style.display=='none')?'block':'none';"> 
            <i class="fa fa-user hidden-xs" ></i> 
            <span style="font-weight:bold;">Connexion</span>
            <i class="fa fa-angle-down hidden-xs"></i> 
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Don't forget to include the CSS snippet below:

.navbar-default .navbar-nav>li>a {
  padding: 15px 0;
}
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="navbar navbar-default navbar-static-top" style="padding-top:5px !important; padding-bottom:5px !important; margin-left:auto; margin-right:auto ;max-width:1135px">
      <div class="container">
        <a href="#" class="navbar-brand" style=""> <span style="font-weight:bold;">HELLO</span></a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#" ><span style="font-weight:bold; margin:40px">choice1</span></a></li>
            <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice2</span></a></li>
            <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice3</span></a></li>
            <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice4</span></a></li>
            <li>
              <a href="#" data-toggle="dropdown" onclick="document.getElementById('form-connect').style.display=(document.getElementById('form-connect').style.display=='none')?'block':'none';"> 
                <i class="fa fa-user hidden-xs" ></i> 
                <span style="font-weight:bold;">Connexion</span>
                <i class="fa fa-angle-down hidden-xs"></i> 
              </a>
            </li>
          </ul>
        </div>
      </div>
    </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

Is it a good idea to show a loading image for slow php/mysql results?

I need some help with my website that is powered by php/MySQL for querying and displaying results. The database has grown to over 40,000 records, causing the query to slow down. I am looking for an efficient way to show a loading image while the page loads ...

phpjquerymysqlajax

Having trouble dynamically adding elements to the Semantic-UI Accordion component

I have a challenge involving inserting dynamic content into a Semantic-UI Accordion. My goal is to display JSON data as an Accordion in the HTML. Below is the script and HTML I am using for this purpose: <script language='javascript'> ...

javascriptjqueryjsonaccordionsemantic-ui

The v-show directive is not activated by a Vuex commit

I am experimenting with vuex for the first time, and I have come across an issue where a v-show directive is not triggering after a mutation commit on the store. // store.js import Vue from "vue" import Vuex from "vuex" const states = ...

javascriptvue.jsvuejs2vuex

In Javascript, the difference between defining a variable using "this.varName" and "var varName" lies in the scope of the variable

Excuse my JS ignorance, but here's a question: In JS, I've noticed functions that define variables inside them like this: function functionName(){ this.something = ""; }; I'm wondering if something is considered a local variable. W ...

javascriptvariables

Utilizing itemprop tag independent of itemtype declaration

My question is whether it's possible to use the itemprop attribute without using the itemtype. Can this be done? If so, how does using these attributes impact SEO? Is it recommended to always use itemtype? I assume it would be beneficial, but what if ...

htmlseomicrodata

Advantages of Using JSON for POSTing Data to a Server with jQuery

While browsing the internet, I've come across various examples of using jQuery to send AJAX POST requests with JSON encoded data to a server. I'm curious about why it's necessary to encode the data in JSON first. Wouldn't it be more eff ...

jsonjqueryurlencode

Converting a jQuery function into AngularJS: A step-by-step guide

I'm completely new to AngularJs and I recently created a slider function using jQuery. Now, my goal is to convert this function into Angular. Below is the code snippet that I have: <div class="slide-container"> <div class="slide-s ...

javascriptjqueryangularjsslider

Steps to add npm peerDependencies for a warning-free installation

Stackoverflow has plenty of questions about npm peerDependencies warnings, but none specifically address the best practices for actually handling the dependencies. Should we save them along with our dependencies and devDependencies? If so, what is the purp ...

javascriptnpmnpm-install

How can I reduce the burden of dependencies on users with a pre-built NPM package?

I recently took over maintenance of an NPM package. It has a unique setup where the main file is located in the 'dist/' directory and it's built using webpack (via 'npm run build'). While this works for us, installing this package ...

javascriptnode.jsnpm

Is there a way to stop CSS from randomly changing rotation direction after numerous rotations in Safari?

I was tasked with creating a card element that consistently flips in the same direction when clicked. The code snippet I found achieved this perfectly, but only worked on Chrome and Firefox. However, when testing it on Safari on both iOS and MacOS, I encou ...

javascripthtmlcsssafaricss-transforms

Utilizing JSON data for efficient React component rendering

As a newcomer to React, I am currently in the process of constructing a dashboard that showcases data from three different sensors. The information regarding these sensors is stored in a single JSON file where each sensor has its own ID and name. This JSON ...

javascriptjsonreactjsaxios

Is it possible to implement marker dragging in Google Maps v3 using JavaScript? How can this be achieved?

I am currently using this code to search for an address, drop a marker, and drag it afterwards. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title&g ...

javascriptgoogle-maps-api-3

Creating a custom jQuery theme inspired by the sleek and functional design of the Django admin interface, achieved through

I have integrated jQuery UI into my Django website and am impressed by the sleek design of Django's admin interface. How can I replicate that aesthetic for the user-facing sections of my site? ...

jquerydjangojquery-uidjango-admin

Failure to establish connection between electron/socket.io client and python-socketio/aiohttp server

My websocket connection is failing at the moment, even though it was working perfectly just a couple of days ago. I attempted to fix the issue by downgrading electron from version 6 to 5.0.6, but unfortunately, this did not resolve the problem. https://i. ...

javascriptpythonwebsocketelectronaiohttp

Iterate through an array to extract specific objects and exclude them from another array

Within my code, I have an array named allItems that stores objects. allItems = [ { id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' } ] I am seeking a way to filter out the objects from th ...

javascriptarrays

What is the best method for positioning span content above all other elements without having it wrap around them?

Each form element on my page is accompanied by a span that displays an error message, if applicable. The layout consists of two columns: left and right. I am struggling to make the span display seamlessly from the left column all the way across the page wi ...

htmlcss

What is the best method for eliminating the gap between div elements in CSS?

I am in the process of creating a simple website to brush up on my basic HTML and CSS skills. Utilizing Dreamweaver CS6, I aim to master every aspect of web design the correct way. While exploring how to position div elements, specifically using margins fo ...

csshtml

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

javascriptangularjsangulartypescriptwebpack

The android web browser and its interactive virtual keyboard

I am currently developing an HTML5 application using PhoneGap version 2.5.0. One issue I have encountered is related to the virtual keyboard behavior on different parts of the app. On the search page, the keyboard appears without obstructing the view, all ...

androidcsshtmlvirtual-keyboard

Updating vertices in the RingGeometry using THREE.js

Is there a way to dynamically update the vertices of a RingGeometry in THREE.JS? Previously, I achieved this by creating a new RingGeometry and replacing the old one's vertices with those of the new geometry. This method worked perfectly in version 6 ...

javascriptthree.jsgeometryring