What's the trick to aligning navigation items side by side?

I'm currently working with the code snippet below:

header {
    height: 110px;
    width: 100%;
    margin-bottom: 130px;
    position: fixed;
    top: 0;
    z-index: 11;
    /*additional styling removed*/
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 78%;
    max-width: 1310px;
    height: 110px
}
nav li > a, nav li.navAside {
    display: inline-block;
    float: left;
    width: 10%;
    height: 110px;
    line-height: 110px;
    text-align: center;
    border-left: 1px solid #7a0202;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    transition: all .3s ease-in-out
}
nav li > a {
    text-transform: uppercase
}
nav li.navAside {
    width: 25%;
    user-select: text
}
nav li:last-child {
    border-right: 1px solid #7a0202
}
nav li > a:hover, nav li > a:active, #slctd {
    background-color: #880b0b
}

To accommodate smaller screens, I've included the following styles:

@media only screen and (max-width: 1300px) {
    nav ul {
        width: 100%
    }
    nav li > a {
        width: 12.8%
    }
    .navAside {
        width: 36% !important
    }
    .navAside:first-child  {
        display: none
    }
}

The issue arises with the code block below:

@media only screen and (max-width: 640px) {
    header {
        height: 50px;
    }    
    nav {
        width: 100%;
        height: 50px;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    nav ul {
        width: 100%;
        white-space: nowrap;
    }
    nav li > a {
        width: 20%;
        min-width: 100px;
        height: 50px;
        line-height: 50px
    }
    .navAside {
        display: none
    }
}

Lastly, here is an excerpt from my HTML markup:

<header>
    <nav class="clearfix">
        <ul class="clearfix">
            <li class="navAside"><img src="img/logo.png" width="146" height="100" alt="Logo" style="margin-top: 4px"></li>
            <li><a href="#!" id="slctd">start</a></li>
            <li><a href="zimmer.html">zimmer</a></li>
            <li><a href="garten.html">garten</a></li>
            <li><a href="kontakt.html">kontakt</a></li>
            <li><a href="laden/">Laden</a></li>
            <li class="navAside"><p>some text</p></li>
        </ul>
    </nav>
</header>

I'm facing difficulty in aligning the list items in a row on mobile devices for horizontal scrolling. Usually, this setup works but it's not functioning correctly this time. I'm unsure of what might be causing the issue. Any assistance would be greatly appreciated.

Answer №1

To optimize your navigation menu for smaller screens, consider adding a style to make the list items inline-block within your media query:

@media only screen and (max-width: 640px) {
nav ul > li{
        display:inline-block;
    }
}

Additionally, include these adjustments in your media query to eliminate unnecessary space caused by using inline-block:

nav ul {
    font-size:0px;
}

nav li > a {
    font-size:16px;
}

For a visual representation, you can check out this code snippet on jsfiddle: http://jsfiddle.net/Mp8ws/1/

Answer №2

Some CSS properties have been applied to the navigation list.

@media only screen and (max-width: 640px) {
        header {
            height: 50px;
        }    
        nav {
            width: 100%;
            height: 50px;
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        nav ul {
            width: 100%;
            white-space: nowrap;
            list-style: none;
            margin-left: 0;
        }
        nav li > a {
            width: 20%;
            min-width: 100px;
                        height: 50px;
            line-height: 50px
        }
        .navAside {
            display: none
        }
    }

Answer №3

Optimizing the design of LI elements is crucial for achieving optimal outcomes. Nevertheless, the display: inline-block property may not always produce consistent results across various user agents. To address this issue, I recommend employing a solution similar to the following:

nav li {
  height: /* define your height */;
  width: /* specify your width */;
  display: block;
  float: left;
}

I trust this suggestion proves helpful!

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

Scrolling Text Loop with CSS Animation

I am currently working on creating a unique CSS animation that resembles a looped conveyor belt. Essentially, I want the text within a div to disappear off the screen to the right and then reappear from the left. Here's the approach I've taken s ...

Bring your Electronic Catalogue to life with the addition of dynamic HTML content showcasing the latest

I am creating a digital magazine but I am facing the challenge of having to deal with 200 pages in jpg format. To streamline the process, I am looking for a way to use a combination of JavaScript and PHP to avoid manually coding for each of the 200 pages. ...

What is the best way to incorporate styled components and interpolations using emotion theming?

I've been building a React web application with a dynamic theme feature using the emotion-theming library. This allows users to switch between different environments, each with its own unique theme. To achieve this, I created my own CustomThemeProvide ...

Resolving the Complete Cover Background Image problem

My current website has a full cover background image implemented using the following code: #back{ /* #back is a div */ position:absolute; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgroun ...

Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is re ...

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Currently, I am sending a PHP request to a login handler using the following URL: https://example.com/test.php?username=test123&password=hiuhsda3#24 However, I need to retain the hashtag in either the password or username along with anything that come ...

``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem? <script type="text/javascript" src="/js/jqu ...

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

Is it possible for the sum to turn into NaN in Bootstrap Table JavaScript?

I used bootstrap to create a table that links with phpmyadmin. I need to show the total current amount in the table, which should update when using the search function. However, I keep getting NaN as my result. Below is the relevant code: // PART OF CODE ...

Is it possible to manipulate a modal within a controller by utilizing a certain attribute in HTML, based on specific conditions (without relying on any bootstrap services), using AngularJS?

Within my application, I have a modal that is triggered by clicking on a button (ng-click) based on certain conditions. Here is the HTML code: <button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert ...

Update Personal Information with PHP and MySQL

i have two files named edit.php and update.php. The content of edit.php is as follows: <?php session_start(); $_SESSION['id'] = '9'; $id = $_SESSION["id"]; $username = $_POST["username"]; $fname = $_POST["fname"]; $password = $_POST ...

Having trouble with your jQuery animation on a div?

Check out this jsFiddle example: http://jsfiddle.net/uM68j/ After clicking on one of the links in the demo, the bar is supposed to smoothly slide to the top. However, instead of animating, it immediately jumps to the top. How can I modify the code to ac ...

When rendering, HTML characters are not translated

My JavaScript code generates the following HTML structure: <div contenteditable="false" tabindex="0" class="ProseMirror"> <p> didn't project a significant increase</p> </div> When rendered in the browser, it shows the cha ...

The recent update to Bootstrap v5 caused a complete disruption in the CSS of our application

My Angular app was originally on Angular 14 and used Bootstrap with SCSS compiled to node-sass/SASS package. It also utilized ng-bootstrap v11 and Bootstrap v4.3.1 for CSS styles. As part of a general upgrade, I needed to update the Angular version to 15. ...

Exploring the potential of Python loops within Selenium capabilities

My latest project involves scraping data from a search page. Specifically, I need to extract the title, price, and link for each of the 25 results on the page. To achieve this, I'm working with Xpath and utilizing an incremental div number associated ...

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

Steps to avoid HTML encoding the ' character in Next.js _document.js file

Currently, I am working on integrating VWO into my website by following the steps mentioned here. I have included the VWO script tag within a NextJs Head tag as shown below: <Head> <script type='text/javascript' id='vwoC ...

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

Having trouble adjusting the right-hand edges of form elements when using percentage widths

Simply put, the issue is this: Why doesn't the second row of elements, with widths of 35% and 55%, take up the same amount of the page's width as the first form element which uses 90%? I often have to adjust the percentages differently dependin ...