Using inline-block in CSS for layout purposes

I recently created a website using a template from w3school. I have a question regarding the anchor elements in my navigation bar:

Why do the anchor elements (home, band, tour, contact) jump when clicked? Does anyone know how to fix this issue?

I've tried searching online for solutions but haven't found anything helpful. Can someone please assist me with this?

Here is a link to my website

And here is the template I used for my website

Thank you in advance for any help provided!

/*reset CSS*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
    font-family: Arial, Helvetica, sans-serif;
}
.header{
    height: 46.4px;
    background-color: black;
}
.header>.nav>.nav__item>a{
    display: block;
    color: white;
    text-decoration: none;
    line-height: 46.4px;
    padding: 0px 24px;
}
.header>.nav>.nav__item{
    display: inline-block;/*to set in the same line*/
}

.header>.nav .sub_nav{
    list-style-type: none;
}
.header>.nav .sub_nav{
    /* display: none; */
}
.header>.nav .sub_nav a{
    text-decoration: none;
    color: white;
}
.header>.nav li:hover>a{
    color: black !important;
    background-color: #ccc;
}

.slider{
    background-color: #333;
    width: 100%;
    height: 500px;
}
<div class="main">
    <div class="header">
        <ul class="nav">
            <li class="nav__item"><a href="">Home</a></li>
            <li class="nav__item"><a href="">Band</a></li>
            <li class="nav__item"><a href="">Tour</a></li>
            <li class="nav__item"><a href="">Contact</a></li>
            <li class="nav__item">
                <a href="">More</a>
                <ul class="sub_nav">
                    <li><a href="">Merchandise</a></li>
                    <li><a href="">Extras</a></li>
                    <li><a href="">Media</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="slider">

    </div>

    <div class="content">

    </div>

    <div class="footer">

    </div>
</div>

htmlcss

Answer №1

Simply include the CSS property position: absolute to the element with class sub_nav to ensure it does not occupy any space within the layout.

/*reset CSS*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
    font-family: Arial, Helvetica, sans-serif;
}
.header{
    height: 46.4px;
    background-color: black;
}
.header>.nav>.nav__item>a{
    display: block;
    color: white;
    text-decoration: none;
    line-height: 46.4px;
    padding: 0px 24px;
}
.header>.nav>.nav__item{
    display: inline-block;/*to set in the same line*/
}

.header>.nav .sub_nav{
    list-style-type: none;
}
.header>.nav .sub_nav{
    position: absolute;
}
.header>.nav .sub_nav a{
    text-decoration: none;
    color: white;
}
.header>.nav li:hover>a{
    color: black !important;
    background-color: #ccc;
}

.slider{
    background-color: #333;
    width: 100%;
    height: 500px;
}
<div class="main">
    <div class="header">
        <ul class="nav">
            <li class="nav__item"><a href="">Home</a></li>
            <li class="nav__item"><a href="">Band</a></li>
            <li class="nav__item"><a href="">Tour</a></li>
            <li class="nav__item"><a href="">Contact</a></li>
            <li class="nav__item">
                <a href="">More</a>
                <ul class="sub_nav">
                    <li><a href="">Merchandise</a></li>
                    <li><a href="">Extras</a></li>
                    <li><a href="">Media</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="slider">

    </div>

    <div class="content">

    </div>

    <div class="footer">

    </div>
</div>

Answer №2

Simply include display:flex within the ul.nav{} selector.

ul.nav {
    display: flex;
}

Answer №3

Here is the solution you've been searching for.

Give this a try, it should work for your needs.

    body,
div {
    margin: 0;
    border: 0 none;
    padding: 0;
    background-color: rgb(65, 63, 63);

}



.md {
    background-color: black;
    /* padding: 15px; */


}

a {
    color: white;
    text-decoration: none;
    padding: 15px;
}

a:hover {
    background-color: rgb(224, 224, 224);
    color: black;
}

.dropbtn {
    background-color: #000000;
    color: white;
    padding: 19px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: rgb(238, 238, 238);
    color: black;
}
   
<!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">
    <title>Document</title>
</head>


<body>



    <div class="md">

        <a href="">HOME</a>
        <a href="">BAND</a>
        <a href="">TOUR</a>
     

<div class="dropdown">
    <button class="dropbtn">MORE ▼</button>
    <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    </div>
  </div>

    </div>








</body>

</html>

Answer №4

To hide the sub navigation in the header, apply display: none to .header>.nav .sub_nav, and on hover, show it by applying display : block to .sub_nav with 

.header>.nav .nav__item:hover .sub_nav
.

Check out the working demo on Fiddle!

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    height: 46.4px;
    background-color: black;
}

.header>.nav>.nav__item>a {
    display: block;
    color: white;
    text-decoration: none;
    line-height: 46.4px;
    padding: 0px 24px;
}

.header>.nav>.nav__item {
    display: inline-block;
    /*to set in the same line*/
}

.header>.nav .sub_nav {
    list-style-type: none;
}

.header>.nav .sub_nav {
    display: none;

    cursor: auto;
    color: #000;
    background-color: #fff;
    position: absolute;
    min-width: 160px;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.header>.nav .nav__item:hover .sub_nav {
    display: block;
}

.header>.nav .sub_nav a {
    text-decoration: none;
    /* color: white; */
    color: black;
}

.header>.nav li:hover>a {
    color: black !important;
    background-color: #ccc;
}

.slider {
    background-color: #333;
    width: 100%;
    height: 500px;
}
<div class="main">
    <div class="header">
        <ul class="nav">
            <li class="nav__item"><a href="">Home</a></li>
            <li class="nav__item"><a href="">Band</a></li>
            <li class="nav__item"><a href="">Tour</a></li>
            <li class="nav__item"><a href="">Contact</a></li>
            <li class="nav__item">
                <a href="">More</a>
                <ul class="sub_nav">
                    <li><a href="">Merchandise</a></li>
                    <li><a href="">Extras</a></li>
                    <li><a href="">Media</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="slider">
    </div>

    <div class="content">
    </div>

    <div class="footer">
    </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

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

htmlcssfirefoxhtml-table

Choose all form styles excluding one that does no have a defined action using css

Looking to create a CSS rule that applies to all forms except for one with a specific action. Currently, I have the following CSS code that hides all #NavMenu forms but shows them for the search form: form #NavMenu{ display:none; } form[action*='Sea ...

htmlcss

Struggling to identify which css or bootstrap statement is impacting the arrangement of the form layout

I'm facing an issue with setting a border and background color behind a form. When I attempt to do so, the form is aligned to the right and I can't pinpoint which part of my code is causing this misalignment. Here's an example: https://jsfi ...

csstwitter-bootstrapforms

Using HTML and CSS to create nested divs floating to the left while also incorporating a

I'm trying to create a simple effect where a fixed height and width div contains a series of child divs that can be scrolled horizontally. However, the children are not floating as expected in the following code: .a {width:200px; height:200px; ...

htmlcsscss-float

Modify the text and purpose of the button

I have a button that I would like to customize. Here is the HTML code for the button: <button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button> The corresponding JavaScript code is as follows: var search = n ...

javascriptjqueryhtml

Position the Bootstrip 4 tooltip to automatically display on the right side

In order to customize the placement of my tooltip on desktop, I have opted for having it positioned on the right side of the elements. While this choice aligns well with my design preferences, it has presented a challenge when viewing the page on smaller s ...

javascripthtmljquerybootstrap-4popper.js

disable meta refresh while the form is active

I have a simple HTML page that refreshes every 15 seconds. There is a form where users can provide comments, but the issue is that when the user types a comment, the page gets refreshed due to the meta tag set to refresh it in 15 seconds. I want to pause t ...

javascriptphpjqueryhtmlmeta-tags

When I click on "Submit", it redirects me to the PHP page

I've followed a tutorial on creating custom PHP contact forms at this link: and made some modifications to the form for my specific requirements. However, when I click the Submit button on the form, it redirects me to the PHP page. What I actually w ...

phphtmlformsemailsubmit

The form fails to transmit information when using enctype=multipart/formdata

I am facing an issue with my PHP form that has 2 upload inputs on localhost. Whenever I set the enctype of the form to multipart/form-data, it fails to send any information. Upon checking, both $_FILES and $_POST were showing as Array() and empty. Here is ...

phphtmlforms

The state of the submit button can be toggled based on the content of the ViewBag

I am attempting to control the state of the submit button based on the value of Viewbag.IsBtnEnabled. If Viewbag.IsBtnEnabled is set to 'Y' or is null, then button should be enabled; otherwise, it should be disabled. My code works as expected exc ...

htmlasp.net-coremodel-view-controller

Avoiding using ID selectors when working with a checkbox hack

I've shared about my project previously. Twice, actually. While the responses have given me better insight into my situation, they haven't been directly applicable. I take responsibility for this as I was posting an incomplete version of the fina ...

htmlcsscheckboxcss-selectors

Icon Stacking - overlaying icons on top of one another

I recently implemented a Google map in my React Native app. However, I'm facing an issue where the icons on the map are overlapping each other instead of being positioned on either side. Despite trying various configurations, the result remains unchan ...

javascriptcssreactjsreact-native

Shifting the menu to the left side of the header for mobile devices: A step-by

I am looking to switch the location of the "hamburger" menu from the right side of the page to the left side. The website in question can be viewed here. This webpage is using the "Bulk" theme. The CSS styling for the icon is as follows: .open-panel { ...

htmlcssstyling

Determine the row index by identifying the row id and table id

I need to retrieve the Index number of a row when a hyperlink is clicked, while also passing additional data from this tag. <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"&g ...

javascripthtml

Troubleshooting: Bootstrap accordion malfunctioning when using a numerical ID

Issues have arisen after updating Bootstrap to version 4.2.1. In this latest version, using id="#12" in an accordion does not seem to work properly. However, in previous versions, it worked just fine with the same id="#12". Any suggestions on how to resolv ...

javascripthtmlbootstrap-4

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

Tips for eliminating the gap above the initial HTML table row while utilizing border-collapse: separate

Currently, I am utilizing the border-collapse: separate property to introduce spacing between table rows in my design. However, I am facing a challenge when trying to eliminate the space above the initial table row. What would be the most effective approac ...

htmlcsshtml-table

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

Having trouble connecting local stylesheet on server?

Currently, I am developing an HTML-based game with Node.js, focusing on enhancing the front-end interface. While trying to include a CSS stylesheet, I encountered an unusual issue. The structure of my folders is organized as follows: C:\Users\m ...

htmlcssnode.js

Carousel-Owl, glide through two items simultaneously

I am currently in the process of developing a slider using the beta version of Owl-Carousel 2, but I am encountering several issues. My goal is to configure the owlCarousel to function as follows: It should scroll through 2 items at a time while displayin ...

javascriptjquerycssowl-carousel