Display Flex not working to show Horizontal Nav links-CodePudding

    <header>
        <nav>
            <div >
                <img src="your-logo.png" alt="Logo">
            </div>
            <ul >
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

header .nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row; /* Ensure the direction is horizontal */
}

header .nav-links li {
    margin-right: 20px; /* Add margin to space out the links horizontally */
}


header .nav-links a {
    color: #fff;
    text-decoration: none;
}

I am having a problem with my navigation bar as it is showing a vertical intead of horizontal link. I am using a design flex on I also tried using inline block on

and it works as expected. I just dont understand why flex is not working to show Horizontal links..

CodePudding user response：

The issue is with the selector. Originally, it looked for a list as a children of a nav-links class

header .nav-links ul

But nav-links is the actual class name of the list, so it needs to be like this:

header ul.nav-links

header ul.nav-links { /* <<<<< NOTE THIS CHANGE */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

header .nav-links li {
  margin-right: 20px;
}

header .nav-links a {
  color: red;
  text-decoration: none;
}

<header>
  <nav>
    <div >
      <img src="your-logo.png" alt="Logo">
    </div>
    <ul >
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

Your css selector to style the ul is wrong: Instead of header .nav-links ul should be header .nav-links or header ul.nav-links

header .nav-links ul: It references the ul child of .nav-links(which doesn't exist)
header ul.nav-links: It references the ul that have class nav-links

Try the code fixed below:

header .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row; /* Ensure the direction is horizontal */
}

header .nav-links li {
    margin-right: 20px; /* Add margin to space out the links horizontally */
}


header .nav-links a {
    text-decoration: none;
}

<body>
  <header>
        <nav>
            <div >
                <img src="your-logo.png" alt="Logo">
            </div>
            <ul >
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
  </header>
</body>

CodePudding user response：

Try adding !important to the flex and check for conflicting styles, and give it some li some dimensions

CodePudding user response：

You don't want to flex the as within the lis

You want to flex the lis within the .nav-links

* {
    margin: 0;
    padding: 0;
}
header .nav-links {
    display: flex;
    & li {
        list-style: none;
        margin-right: 20px;
        & a {
            color: #fff;
            text-decoration: none;
        }
    }
}