CODEWITHSUNDEEP
htmlcss
Ushi
Ushi

Reputation: 47

How to put heading and nav on the same line (not working)

Basically what's happening is that my h1 and my nav elements aren't going on the same line. I tried adding a width of 100% and float left and right properties on h1 and nav but still it's not on the same line. I put some gibberish in the h1 to show you that the leveling is off by very little. Help!

Here's my HTML:

<!doctype html>
    <html>
    <head>
            <title>
            Personality Speakes Before You
            </title>
            <meta charset='utf-8'> 
        <link href="main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
        <h1>Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Event</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        </header>
    </body>
</html>

Here's my CSS:

 body  {
    background-color: azure;
    font-family: cursive;
}
    header {
    width: 100%;
}
h1 {
    float:left;
    font-size: 30px;
    text-decoration: underline;
}
nav {
    float: right;
}
ul {
        color: darkslategray;
    }

li {
    display: inline;
    font-size: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

Thanks!

Upvotes: 0

Views: 3404

Answers (2)

TheYaXxE
TheYaXxE

Reputation: 4294

Try change your floats to display: inline-block, and set the header to white-space: nowrap:

body  {
  background-color: azure;
  font-family: cursive;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}
h1 {
  display: inline-block;
  font-size: 30px;
  text-decoration: underline;
}
nav {
  display: inline-block;
}
ul {
  color: darkslategray;
}

li {
  display: inline;
  font-size: 30px;
  margin-left: 10px;
  margin-right: 10px;
}
<header>
  <h1>Anum</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Event</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Note: Since the font sizes are so big, see the full effect in "Full page" mode

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

The h1 and nav are too wide to fit on one line, so it kinda depends on what you want to happen then as to how to address it. An easy fix is to use a media query to resize the font of those elements when they start to overlap.

body  {
    background-color: azure;
    font-family: cursive;
}
    header {
    width: 100%;
}
h1 {
    float:left;
    font-size: 30px;
    text-decoration: underline;
}
nav {
    float: right;
}
ul {
        color: darkslategray;
    }

li {
    display: inline;
    font-size: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

@media (max-width: 1280px) {
  h1,li {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  h1,li {
    font-size: 16px;
  }
}

@media (max-width: 800px) {
  h1,li {
    font-size: 12px;
  }
}
<!doctype html>
<html>

<head>
  <title>
    Personality Speakes Before You
  </title>
  <meta charset='utf-8'>
  <link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <h1>Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Event</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Alternatively, you can use responsive font size units like vw that scale based on the page width.

* {margin:0;padding:0;}

body  {
    background-color: azure;
    font-family: cursive;
}
    header {
    width: 100%;
}
h1 {
    float:left;
    font-size: 1.5vw;
    text-decoration: underline;
}
nav {
    float: right;
}
ul {
        color: darkslategray;
    }

li {
    display: inline;
    font-size: 1.5vw;
    margin-left: 10px;
    margin-right: 10px;
}
<!doctype html>
<html>

<head>
  <title>
    Personality Speakes Before You
  </title>
  <meta charset='utf-8'>
  <link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <h1>Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Event</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Or you can use other techniques like hiding the vavigation in a hidden menu when you size the browser down and they no longer fit on one line. Then you use a link/button to show the hidden menu.

Upvotes: 0

Related Questions