divs inside a tag goes to new line-CodePudding

Im trying to align my a-tags side by side, but for some reason the divs inside the a-tag goes to the next line?

How can I align my three menu lines side by side with the others? display: inline-block; didn't work for me?

What I'm trying to create is something like this image:

But what do I miss to get the menu on the same line?

.logo-style {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 39px;
    /* identical to box height */
    letter-spacing: 0.05em;
    color: #4C5BA0;
}

/*
    Navigation bar three lines menu

/*
 Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: brown;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: black;
}

.topnav a.active {
    color: black;
}


*/

.line-one {
    width: 30px;
}

.line-one {
    width: 30px;
}

.line-one {
    width: 30px;
}

.menu div {
    width: 30px;
    height: 4px;
    background-color: brown;
    margin: 5px 0;
    border-radius: 25px;
}

.menu {
    width: 30px;
}

.menu:hover div {
    width: 30px;
    background-color: black;
}

.right-nav {}

.left-nav {}

<?php
    declare(strict_types=1);
?>
<!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 href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
    <link rel="stylesheet" href="./css/site.scss">
    <script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
    <header>
        <div class="topnav">
            <div class="left-nav">
                <a href="#news"><p class="logo-style">Web title</p></a>
            </div>
            <div class="right-nav">
                <a href="#home" class="active">Home</a>
                <a href="#archives">Archives</a>
                <a href="#coverage">Coverage</a>
                <a href="#menu" class="menu">
                    <div class="line-one"></div>
                    <div class="line-two"></div>
                    <div class="line-three"></div>
                </a>
            </div>
        </div>
    </header>
</body>
</html>

CodePudding user response：

Put this on your .right-nav

Display flex is very useful for this kind of situations.
Property flex-direction isn't neccesary, display flex itself is flex-direction: row; by default.
The gap isn't neccesary too, it just makes a gap between your items.
align-items is to align your items vertically in the center.

.right-nav {
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
}

CodePudding user response：

You forgot to use display: flex; to .right-nav class. And center elements properly align-items: center; justify-content: center; Now everything works fine:-) Best regards!

 .right-nav {
      display: flex;
      align-items: center;
      justify-content: center;
    }

.logo-style {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 39px;
  /* identical to box height */
  letter-spacing: 0.05em;
  color: #4c5ba0;
}

/*
    Navigation bar three lines menu

/*
 Navigation
*/

.topnav {
  overflow: hidden;
  background: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topnav button {
  border: none;
  cursor: pointer;
}

.topnav a {
  color: brown;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  color: black;
}

.topnav a.active {
  color: black;
}

.right-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}


*/ .line-one {
  width: 30px;
}

.line-one {
  width: 30px;
}

.line-one {
  width: 30px;
}

.menu div {
  width: 30px;
  height: 4px;
  background-color: brown;
  margin: 5px 0;
  border-radius: 25px;
}

.menu {
  width: 30px;
}

.menu:hover div {
  width: 30px;
  background-color: black;
}

<header>
  <div class="topnav">
    <div class="left-nav">
      <a href="#news">
        <p class="logo-style">Web title</p>
      </a>
    </div>
    <div class="right-nav">
      <a href="#home" class="active">Home</a>
      <a href="#archives">Archives</a>
      <a href="#coverage">Coverage</a>
      <a href="#menu" class="menu">
        <div class="line-one"></div>
        <div class="line-two"></div>
        <div class="line-three"></div>
      </a>
    </div>
  </div>
</header>

CodePudding user response：

There are many different ways to go about creating this display, but probably the most straightforward approach in modern CSS is to use CSS Flexbox.

(Or, in this case, two nested Flexboxes.)

The example below has two elements which use:

display: flex;

One is the <header> itself, which means its two immediate children:

<h2 class="logo-style">
<nav>

will be flexibly positioned along its horizontal axis.

The other is the <nav>, which means its two immediate children:

<ul>
<a class="menu">

will in turn also be flexibly positioned along its own horizontal axis.

Note that the <header> has a justify-content value of space-between which means that the first of its two children will be positioned towards the left and the second will be positioned towards the right.

By contrast, the <nav> has a justify-content value of flex-end which means that both of its children will be positioned towards the right.

Working Example:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-style a {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 39px;
    letter-spacing: 0.05em;
    color: #4C5BA0;
}

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav ul li {
  display: inline-block;
  margin-right: 18px;
  padding: 6px;
  border-radius: 6px;
}

nav ul li:hover {
  background-color: #4C5BA0;
}

nav ul li:hover a {
  color: rgb(255, 255, 255);
}

.menu {
  display: inline-block;
  width: 30px;
  height: 27px;
  background: linear-gradient(brown 0% 20%, white 20% 40%, brown 40% 60%, white 60% 80%, brown 80% 100%);
}

.menu:hover {
  height: 27px;
  background: linear-gradient(black 0% 20%, white 20% 40%, black 40% 60%, white 60% 80%, black 80% 100%);
}

<header>
  <h2 class="logo-style"><a href="#news">Web title</a></h2>

  <nav>
   <ul>
     <li><a href="#home" class="active">Home</a></li>
     <li><a href="#archives">Archives</a></li>
     <li><a href="#coverage">Coverage</a></li>
   </ul>
   
   <a href="#menu" class="menu"></a>
  </nav>

</header>