Optimize flexbox navbar layout by eliminating unnecessary spacing between items

Greetings! As a novice in the world of web development, I must admit that I am facing some difficulties with my homework assignment. Despite my several attempts, I am unable to remove the spacing in the navbar on my university website clone project. It simply doesn't look pleasing to the eye.

I have come across outdated posts suggesting the use of negative margin for this issue, but I believe there must be a more modern and efficient solution available.

If you would like to take a closer look at my code, it is available on Codepen: https://codepen.io/pr1232/pen/MWJPooq

Currently, I have set a background color for the links, intending for it to completely fill the height of the navbar without any gaps between adjacent links. The color is merely for visual purposes at the moment. Although I attempted to achieve the same result using padding, I found myself hardcoding values which seemed impractical.

htmlcssflexbox

Answer №1

Give this a shot

/**
Font selection: 

    font-family: 'Montserrat', sans-serif;

    font-family: 'Noto Sans JP', sans-serif;

    font-family: 'Open Sans', sans-serif;

    font-family: 'Source Sans Pro', sans-serif;
*/
:root {
    --default-bg-color: hsl(0, 0%, 90%);
    --charcoal-blue: #34495E;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--default-bg-color);
}

h1 {
    font-family: "Montserrat", sans-serif;
    color: var(--charcoal-blue);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5em;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

header,
footer {
    background-color: var(--charcoal-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li {
    display: inline-block;
    padding: 15px;
    background-color: #fff;
}

/* solution */
footer ul,
header nav ul {
    font-size: 0;
    line-height: 0;
}

footer a,
header nav a {
    font-size: 16px;
    line-height: 1.5;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="preconnect" href="https://fonts.gstatic.com"/>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP&family=Open+Sans&family=Source+Sans+Pro&display=swap" rel="stylesheet"/>
        <title>Portfolio</title>
    </head>
    <body>
        <header>
            <a href="index.html"><img src="assets/svg/hexagon-with-right-arrow.svg" alt="Website Logo"/></a>
            <nav>
                <ul>
                    <li><a href="pages/about-us.html">About Us</a></li>
                    <li><a href="pages/registration.html">Registration</a></li>
                    <li><a href="pages/faculty.html">Faculty</a></li>
                    <li><a href="pages/fee-structure.html">Fee Structure</a></li>
                    <li><a href="pages/login.html">Login</a></li>
                    <li><a href="pages/signup.html">Sign Up</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>I am Nitesh.
                <br/>I build websites
                <br/>and other cool stuff.</h1>
        </main>
        <footer>
            <!--
                        ---Social Media Links---
                  -->
            <ul>
                <li><a href="">Github</a></li>
                <li><a href="">Linkedin</a></li>
                <li><a href="">Twitter</a></li>
            </ul>
        </footer>
    </body>
</html>

Answer №2

Even though you mentioned a "flexbox navbar" in your title, the navigation element itself is not styled using flexbox. This leads to the spaces appearing in your markup when viewed in the browser.

To achieve the desired effect without changing your existing markup, you can simply use the flexbox display property. All you have to do is add display:flex to your CSS like this:

nav ul {
  display:flex;
}

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

JavaScript/jQuery Tutorial: Accessing the src attribute of images sharing a common class名

How can I extract the src values of images with the same class and display them in an empty div? For instance: <body> <img class="class1" src="http://www.mysite.com/img/image1.jpg" width="168" height="168" alt=""> <img class="class ...

javascriptjqueryhtml

Navigating to a randomly generated ID in Firestore using Vue - A Step-by-Step Guide

My app uses Firestore as a backend for posts. On the screen displaying all categories, when a new category is created it's added to the list. When a category is clicked, I use its id as a parameter to navigate to that specific category and show the po ...

javascripthtmlvue.jsgoogle-cloud-firestorevue-router

Dynamic user group system that leverages Ajax technology for seamless integration with an HTML interface, powered by PHP and

I am new to this, so please forgive my lack of knowledge. Currently, I am in the process of creating an Ajax-driven web application for managing user contact groups. This application allows users to store contacts based on assigned groups. Once a user con ...

phpjavascripthtmljquery

Adjust the alignment of text within the <select> tag to the right in Safari browser

Is there a way to align text right in a select option tag? <select style="direction:rtl;text-align:right"> <option value="" selected="">همه</option> <option value="1">راهبر سيستم</option> <option v ...

htmlcsssafari

How to Customize Password Input Fields in HTML

My input field is set to password type, allowing only a six-digit number: <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" ...

htmlcssinput

Selenium cannot find iFrames

I've come across various suggestions about transitioning to iframes such as driver.switchTo().frame("test frame"); and driver.switchTo().defaultContent(); Yet, I'm having trouble navigating to MenuFrame 4 in the following code. I am utilizing Ja ...

javahtmlseleniumiframe

When I utilize $router.push() to navigate to a different page, the back button will take me back to the previous page

Within my Vue project, there is an HTML page that I am working on. Here is the link to the page: https://i.sstatic.net/cbtqM.png Whenever I click on the "+"" button, it redirects me to this specific page: https://i.sstatic.net/0rmMD.png This page funct ...

javascripthtmlvue.js

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

javascriptjqueryhtmlcssvariables

What is the regular expression that allows numbers between 1 and 24, including decimals?

Can anyone help me create a regex expression that only allows numbers between 1 and 24, with up to 2 decimal places? The numbers should range from 1 to 24, as well as include decimals like 1.00, 1.01, 1.02, all the way up to 24.99. ...

javascripthtmlregexexpression

Menu drop down offset in Internet Explorer 7

Having some difficulty with a dropdown menu specifically in IE7. The menu functions correctly in all other browsers, but in IE7 it seems to be misaligned for some reason. Any suggestions or insights would be greatly appreciated. Please refer to the menu co ...

htmlcssdrop-down-menuinternet-explorer-7

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

How should HTML5 type "month" be stored in a Django model's database using which data type?

My HTML form includes a field for inputting a month <input type='month' name="last_appraisal" id='txtLastAppraisal' value='2013-12' /> In the Django model, I have defined this field as last_appraisal = models.DateFie ...

pythondjangohtml

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

jqueryhtmlcss

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

htmlcssangular

Adding the BETA symbol to your Bootstrap navbar is simple and can be done by

Is there a way to include a "BETA" symbol at the top of the "Brand Name" on my Navbar, similar to the "TM" symbol? How can this be achieved? ...

htmlcssbootstrap-4

What is the best way to access the inner html of every cell within a table row that I have selected?

I want to implement a feature on my website where users can click a "save" button on a specific row in a table and save the entire row's innerHtml onto another page as their favorite hiking trails. I've been trying to achieve this by adding clic ...

javascripthtml

The drop-down menu auto-loads as though it is being hovered over

I recently added a drop-down menu to my website that includes social media buttons. All the buttons are working properly, except for Google+. When the page loads, it seems as though the hover effect is automatically activated for the Google+ button. For e ...

htmldrop-down-menugoogle-plus

Identifying clicks on various indices within a common class or element

My website has a navigation menu with unordered list items in it. <nav> <ul> <li id="zero"></li> <li id="one"></li> <li id="two"></li> </ul> </nav> I am working on implementing J ...

javascriptjqueryhtmlindexing

"Encountered an issue with submitting the nodejs form

edit 2 After attempting to implement the following code snippet in my nodejs application, I encountered an issue where the form data was not being successfully posted to the database: router.get('/dashboard/users/forms/competition-form/:id', en ...

htmlnode.jsexpress

Optimizing the rendering of Font-awesome CDN JS for better performance on Pagespeed Insights

Instead of directly linking to the Font Awesome CSS, I have chosen to leverage the JavaScript provided by the trustworthy and efficient Font Awesome CDN. This allows for asynchronous loading of icons on my homepage, ensuring a seamless user experience. How ...

javascriptcssfont-awesomepagespeedgoogle-pagespeed