Collapsed Navigation Bar in Bootstrap 4

I'm in the process of reorganizing my collapsed navbar, which was created using Bootstrap 4. Currently, it appears like this:

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

Is there a method to align the social media buttons on one line, shift 'About' further down, and remove the space preceding 'Projects' and 'Contact'?

This is what my code looks like:

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Timo Springer</a>
    <ul class="nav navbar-nav m-x-auto" style="width: 300px;">
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <ul class="nav navbar-nav pull-md-right">
        <li class="nav-item">
            <a class="nav-link" href="https://www.facebook.com/timo.springer"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/springertimo/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://500px.com/timospringer"><i class="fa fa-500px" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://de.linkedin.com/in/timo-springer-372468129"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        </li>

    </ul>
</div>

Thank you!

Timo

Answer №1

To fix the alignment issue in the navigation bar for smaller screens, simply insert clear:both within the media queries of your CSS as shown below:

@media (max-width:767px){
  .nav.m-x-auto{
    clear:both;
    margin: 0 !important;
  }
  .nav.navbar-nav.pull-md-right li{
    float:left;   
  }
   .nav.navbar-nav.pull-md-right li + li{
      margin-left: 1rem;
   }
}

For a live demonstration, check out this Demo

Answer №2

This solution should be effective.

ul.nav.navbar-nav.m-x-auto {
float: none!important;
clear: both!important;
width: 100%!important;
}

ul.nav.navbar-nav.pull-md-right {
width: 100%!important;
clear: both!important;
float: none!important;
}

ul.nav.navbar-nav.pull-md-right > li {
width: 25%;
text-align: center;
display: inline-block!important;
}

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

Collapse the accordion item when a different one is selected

Check out this code snippet that's working on jsfiddle I'm attempting to add a function to close any open accordion items when another one is clicked. I've added a class "open", but I'm having trouble removing the class when a differen ...

The HTML object is experiencing difficulties with the Ajax page loader feature not functioning as

I attempted to use the code below in order to show an Ajax loader image while the page loads into an HTML object. Unfortunately, it didn't work as expected and I'm having trouble figuring out why. Everything seems to be functioning correctly exce ...

Can you tell me how to implement a shopping basket in vue.js that only appears when an item has been added to it?

After numerous attempts, I often find myself clearing everything and starting from scratch. How can I make this work? Observing and learning from others will greatly assist me! This area is designated for shopping cart items. If it's empty, nothing ...

What is the best way to incorporate a button following every element in a Jade iteration?

Having trouble locating a solution to this issue. It's possible that I'm not conducting the right search. My current code looks like this: each val in district_list li= val button.btn.btn-sm(type="submit") Remove With this code, a Remove b ...

Guidelines on how to extract linked text using Selenium in C#

I am attempting to automate the download of files from a lined text, but unfortunately, I am having trouble getting it to work. I am a beginner with selenium. Here is the HTML code of the site: Ttnc-18p - 17.34 GB <table class=&q ...

Looking for ways to locate an element using the Material-icons name?

Looking for the following HTML element using JavaScript: <i class="material-icons bh-icon-accordion">keyboard_arrow_up</i> I have multiple arrow_down elements and only one arrow_up element, so finding it by class is not an option. Since ther ...

Troubleshooting Vue.js nested v-for with <tr> tag problem

Why does Vue complain about undefined properties when I try nesting a <tr> inside a <tr> with a v-for binding on each? <table> <thead></thead> <tbody> <tr v-for="item in items"> <td>{{ item.nam ...

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

Adding a text stroke to the <input type="text"/> element

    Can anyone provide a solution for implementing text stroke in <input type="text"/> that works across all major browsers (Firefox, Google Chrome, Safari, Opera, IE7+)? Is there any method using CSS 2.1 or jQuery to achieve this effect? ...

Is it possible to permanently alter HTML values with JavaScript?

Can a html value be permanently modified using javascript? I am trying to edit a local file. Below are the codes I'm using: function switchPic(){ top.topPage.activeDef = top.topPage.document.getElementById('h1'); top.topPage.activeDef. ...

What is the method for utilizing the onmouseover function to emphasize a specific part of an SVG graphic?

I am attempting to create an interactive SVG map of Europe. Each country is represented by a path element, and I want the opacity of a country to change to 0.5 when it is hovered over. Despite trying to define a JavaScript function for this purpose, noth ...

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards

As I work on making my website WCAG level A compliant, I've encountered an issue with the mat-select component in Angular material. After running checks with the AInspector extension for Firefox, it appears that the mat-select component lacks aria-con ...

Placing a form amidst two div containers

I am delving into the world of CSS and Bootstrap, attempting to recreate a simple layout. However, I'm encountering some challenges. My goal is to stack 2 divs on top of each other with a form that spans both divs. Can you provide insight on how to a ...

Identifying the class of a clicked button using Jquery

Currently, I am experiencing an issue with my code $(document).ready(function(){ $(".follow-button").click(function(){ alert("asdf"); } }); <button class="follow-button" align="right" align="center"> Follow </butt ...

The nested div within the ui-view element is failing to expand to the entire width of the window

I am facing a challenge in making a child div stretch to the entire width of the window, rather than just the width of its parent. I am incorporating AngularJS with UI-Router, and I'm not sure if that is causing the issue. Attached is a screenshot. ...

The CSS tag combination of 'position:relative;' and 'top:xx%;;' functions properly in Chrome, however, it does not work in any non-webkit browsers such as Firefox, Internet Explorer, Opera, etc

Encountering some strange behavior with a simple piece of code that I can't seem to figure out! I am trying to position a footer navigation at the bottom of my page using 'position:relative;' and it works perfectly in Chrome. However, in FF ...

Create two div elements that dynamically overlap two additional div elements on a responsive layout

https://i.sstatic.net/hdcKn.png I'm really intrigued by the idea of making divs overlap each other in a unique way. I wonder if it's possible and if there are techniques to make this responsive using Bootstrap or another library. Could the divs a ...

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...