Issue with border in Bootstrap Grid Navigation Bar

I've experimented with margins, padding, and border options extensively, but I still can't get rid of the white space at the end of my navbar. Can anyone provide a simple solution, please? See the attached image for a clear visual of the issue. Thank you.

https://i.sstatic.net/MjcEr.gif

HTML:
        <div class="container-fluid">
            <div class="row">
                <ul class="list-inline clearfix">
                    <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                        <a href="index.html" class="hvr-sweep-to-bottom"><i class="fa fa-home" san-serif hidden="true"></i><span>Home</span></a>
                    </li>
                    <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                        <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-ticket" aria hidden="true"></i><span>Tickets</span></a>
                    </li>
                    <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                        <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-commenting" aria hidden="true"></i><span>Video</span></a>
                    </li>
                    <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                        <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-address-book" aria hidden="true"></i><span>Contact</span></a>
                    </li>
                </ul>
            </div>
        </div>

    CSS:

    .menuitem{
        height: 120px;
        text-align: center;
    }

    .menuitem a{
        width: 100%;
        text-decoration: none;
        color: #ffffff;
        height: 120px;
    }

    .menuitem a i{
        padding-top: 22px;
        display: block;
        color: #fafafa;
        font-size: 26px;
    }

    .ul-menu-color{
        background-color: #000;
        font-family: 'Creepster', cursive;
    }
    

Answer №1

The issue you are experiencing is a result of nesting your navbar within a div element, followed by defining another div element. Divs are block level elements, causing the white space you are seeing due to the default margin between two block level elements. To resolve this, try enclosing them in a single parent div or apply the following CSS to the div after the navbar:

div{ margin-top: -10px; }

Give this solution a try and hopefully, it will work for you!

Answer №2

In case someone encounters this problem, it turned out to be because of the class="list-inline clearfix"

By removing and adjusting the padding of the UL, the navigation bar now looks flawless.

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

Implementing HTML page authentication with Identity ADFS URL through JavaScript

I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...

Is it possible to eliminate the black bars from YouTube HQdefault image using only CSS?

(After searching extensively, I couldn't find the exact same question and answer) I have a dilemma with displaying YouTube's hqdefault thumbnails on my page. It seems that they are 480 by 360 pixels, resulting in black bars at the top and bottom ...

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

Transfer the content from a specific div into another div

Within this code snippet, there are three buttons labeled P1, P2, and P3, each connected to a card div below them. On the right side, there is another div containing the text "TEXT SHOULD BE DISPLAYED HERE". The desired functionality is that clicking on an ...

Improving efficiency of basic image carousel in Angular 8

In my Angular 8 app, I am developing a basic carousel without relying on external libraries like jQuery or NgB. Instead, I opted to use pure JS for the task. However, the code seems quite cumbersome and I believe there must be a more efficient way to achie ...

The word-break CSS property is ineffective in this situation

I've been experimenting with the word-break css property, but I just can't seem to get it to work even when using a simple example. Here's my code: React: render() { return ( <h5 className="word-break">A very very long line.... ...

Maintaining Portrait Lock for Viewport in HTML5/CSS3: A Guide

Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...

The submit button is getting disrupted by the background image being set

Implement the following CSS code to set a background image on a single-page app (Angular). .page::before { content: ''; position: absolute; background-size: cover; width: 100%; height: 100%; background-image: url("../../assets/weird. ...

Selection box containing options retrieved from MySQL database dates

I am trying to populate an HTML dropdown with data from a MySQL database. I ran the query in PHPMyAdmin and it worked fine, returning one record. The entire website is connected to this MYSQL details. Here is my code:  <?php mysql_connect("loc ...

Struggling to position search form to the right side of an <li> element

I'm having trouble aligning my search bar to the right side of the navigation menu items. HTML: <body> <div id="navbox"> <nav id="nav"> <ul id="nav"> <li><a href="#">Home< ...

Navigating to a precise location on initial page load using Angular 11

Within the structure of my app, I have a parent component that displays a large image from a child component. When the parent component loads, I want the browser window to automatically scroll to a specific position in order to center the image. Currently ...

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

I am encountering an issue with my Angular 9 form code. I am getting the error "ERROR TypeError: Cannot read property 'mobile_number' of undefined" and I need help in resolving this problem. <form (ngSubmit)="processForm()"> & ...

Verify that the web element has a class containing the pseudo selector (:first-child) applied using Selenium WebDriver

Whenever I have a css style that uses the pseudo selector first-child: .point:first-child { margin-left: 0; } Could one find out if a specific DOM element has the class point with the :first-child pseudo-selector applied? .getAttribute("class") isn&a ...

What could be causing the malfunction of my href directory in my ReactJS project?

When I click the "Join Now" button, I am attempting to navigate to a specific file but it does not appear to be functioning as expected. In the image below, you can see that on line 9 there is an href for '/auth/login', however, when I click the ...

tips for efficiently using keyboard to navigate through tabs in an unordered list

Utilizing unordered lists in this web application. I am looking to implement tab navigation with keyboard functionality. How can I achieve this? The first tab should contain text boxes, and when the user fills out a text box and presses the tab key, they s ...

Angular: module instantiation unsuccessful

Just getting started with Angular and running into an issue where the module seems to be unavailable. https://docs.angularjs.org/error/$injector/nomod?p0=plopApp My code is very basic at the moment, just setting things up: @section scripts{ <script s ...

Why does the "margin" CSS style fail to function properly in FlowPanel within GWT?

I'm currently working with Gwt and have encountered a problem with styling buttons. Let's take a look at the following code snippet: .marginRight{ margin-right: 10px; } FlowPanel myFP=new FlowPanel(); Button myButton=new Button("Button"); Butt ...

Display a Popup at 5PM without the need for a page refresh, updating in real-time

After searching extensively online, I was unable to find a suitable solution for my issue. What I am aiming for is to have a popup appear on my page every day at 5:00 PM without the need to refresh the page. If I happen to access the page before 5:00 PM an ...

Anchoring HTTP headers in HTML tags

Currently, I am working on some code to enable dragging files from a web app to the desktop by utilizing Chrome's anchor element dragging support. The challenge I am facing is that certain file links require more than a simple GET request - they nece ...