Navbar behaving weird with h1 tag after it

Question

I have a little trouble with my HTML and CSS. Ive got some code to make a navbar. HTML:

<!DOCTYPE html>
  <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Daicicle's Combos</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="nav">
            <a href="#" class="nav-title">Website</a>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link">Home</a></li>
                </ul>
            </nav>
    </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body {margin: 0; font-family: 'Roboto', sans-serif;}


.nav-title {
    float: left;
    color: rgb(114, 114, 114);
    text-decoration: none;

    padding: 1rem 1rem 1rem 1rem;
}

nav {
    float: right;
}

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

nav li {
    display: inline-block;
    margin-left: 70px;
    position: relative;

    padding: 1rem 1rem 1rem 1rem;
}

nav li a {
    padding: 5px 5px 5px 5px;
    color: rgb(114, 114, 114);
    text-decoration: none;
    background-color: rgb(230, 230, 230);
    border-radius: 3px;
}

.title {
    margin: 0;
    text-align: center;
    color: rgb(114, 114, 114);
    font-size: 3em;
    padding-top: 2vh;
}

Yet when I try to add a h1 tag right underneath the div with the nav class, I get this:

https://cdn.discordapp.com/attachments/464823851151523850/496068123376615448/unknown.png

What am I doing wrong?

score 1 · Accepted Answer · answered Sep 30 '18 at 21:51

HERE is some useful info about floats

div.nav containes only floating elements so it's loosing its shape. You need a fix (check css in my snippet):

body {margin: 0; font-family: 'Roboto', sans-serif;}

/* Fix for wrapping floating content */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* End of the fix */

.nav { background: #eee; }

.nav-title {
    float: left;
    color: rgb(114, 114, 114);
    text-decoration: none;

    padding: 1rem 1rem 1rem 1rem;
}

nav {
    float: right;
}

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

nav li {
    display: inline-block;
    margin-left: 70px;
    position: relative;

    padding: 1rem 1rem 1rem 1rem;
}

nav li a {
    padding: 5px 5px 5px 5px;
    color: rgb(114, 114, 114);
    text-decoration: none;
    background-color: rgb(230, 230, 230);
    border-radius: 3px;
}

.title {
    margin: 0;
    text-align: center;
    color: rgb(114, 114, 114);
    font-size: 3em;
    padding-top: 2vh;
}

<div class="nav clearfix">
            <a href="#" class="nav-title">Website</a>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link">Home</a></li>
                </ul>
            </nav>
    </div>
            <h1 class="title">My header</h1>

score 0 · Answer 2 · answered Sep 30 '18 at 21:48

0

for me everyting looks fine. take a look at my jsfiddle. if you want the h1 to appear under the navigation bar, you have to definde the .nav-class in your css.

also try width: 100% and overflow: hidden on .nav. that will do the trick.

https://jsfiddle.net/84nkfjr3/

answered Sep 30 '18 at 21:48

GabrielTheCoder

88
9

`overflow: hidden` does the trick most of the time, but on navbars it prevents using any dropdown lists. – Sharak Sep 30 '18 at 21:59

Navbar behaving weird with h1 tag after it

2 Answers2