Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Answered CSS navbar row vs column

Hello.

I´m implementing a navbar on a site. I have used this navbar before (lower part of pic) and I´m now trying to use it again exactly as before.
The problem is that it´s stacking vertically and not horizontally (upper part of pic).

I can´t figure out why!

I´m using exactly the same HTML and CSS as the working one, but to no avail.
Can someone help me out?

Here´s the examples and the code I´m using.

Untitled-1.jpg

HTML:
<div class="header">
        <div class="nav">
            <div class="container red topBotomBordersOut">
                <a href="#">HOME</a>
                <a href="#">SERVICES</a>
                <a href="#">ABOUT</a>
                <a href="#">CONTACT</a>
            </div>
        </div>        
    </div>

CSS:
.header {
    background-color: rgba(27,61,95,0.90);
    height: 35px;
    line-height: 35px;
    border-bottom: 3px solid #c3944b;

}

CSS:
/* NAV */

.nav{
    margin: auto;
    max-width: 1920px;
}

.nav a
{
    color: #FFF;
    text-decoration: none;
    font: 14px Raleway;
    margin: 0px 0px 0px 20px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

/* NAV ANIMATION */

.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;  
    background: #c3944b;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
    top: 6px;
    transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
    bottom: 7px;
    transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}
 
Solution
I tried to put display: flex; and flex-direction: row; in the header like this;
.header { display: flex; flex-direction: row; background-color: rgba(27,61,95,0.90); height: 35px; line-height: 35px; border-bottom: 3px solid #c3944b; }
But it only moved the meny to the center and still stacke vertically.
I believe the reason you are still having trouble is that you are pulling in the .container styling to your menu. You have <div class="container red topBotomBordersOut"> in your HTML, which will pull styling from all of .container, .red, and .topBotomBordersOut.

Even though container is above header in the HTML hierarchy, you are...
I don't see anything that would cause the links to display vertically from that portion of your CSS.

I would suspect you are dealing with parent container or global styling that is being inherited.

You could trying adding display: inline; to your .nav a { as an attempt to override inherited styling.
 
Tried display: inline It didn´t change anything but you are right about the parent container.

It has flex-direction: column; and that was it. Is there a way to keep flex-direction: column; in the container and flex-direction: row; in the header?
 
According to the CSS provided, there are no flex elements. Is that the complete CSS for the header?
Here´s the intire HTML and CSS file.
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>RS Design</title>
        <link rel="stylesheet" href="css/reset.css" media="screen" />
        <link rel="stylesheet" href="css/main.css">
    
     </head>

<body>
<div class="container">
  
    <div class="header">
        <div class="nav">
            <div class="container red topBotomBordersOut">
                <a href="#">HOME</a>
                <a href="#">SERVICES</a>
                <a href="#">ABOUT</a>
                <a href="#">CONTACT</a>
            </div>
        </div>       
    </div>

  
    <div class="main">

      
    </div>
  
    <div class="footer">
      
    </div>
      
</div>
  

</body>
</html>

CSS:
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: rgba(27,61,95,0.90);
    height: 35px;
    line-height: 35px;
    border-bottom: 3px solid #c3944b;

}

.main {
    flex-grow: 1;
}

.footer {
    border-top: 3px solid #c3944b;
    background-color: #314c68;
    height: 250px;
}

/* NAV */

.nav{
    margin: auto;
    max-width: 1920px;
}

.nav a
{
    color: #FFF;
    text-decoration: none;
    font: 14px Raleway;
    margin: 0px 0px 0px 20px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

/* NAV ANIMATION */

.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px; 
    background: #c3944b;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
    top: 6px;
    transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
    bottom: 7px;
    transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

I tried to put display: flex; and flex-direction: row; in the header like this;
.header { display: flex; flex-direction: row; background-color: rgba(27,61,95,0.90); height: 35px; line-height: 35px; border-bottom: 3px solid #c3944b; }
But it only moved the meny to the center and still stacke vertically.
 
Last edited:
I tried to put display: flex; and flex-direction: row; in the header like this;
.header { display: flex; flex-direction: row; background-color: rgba(27,61,95,0.90); height: 35px; line-height: 35px; border-bottom: 3px solid #c3944b; }
But it only moved the meny to the center and still stacke vertically.
I believe the reason you are still having trouble is that you are pulling in the .container styling to your menu. You have <div class="container red topBotomBordersOut"> in your HTML, which will pull styling from all of .container, .red, and .topBotomBordersOut.

Even though container is above header in the HTML hierarchy, you are directly pulling the .column styling again into the level where your menu is because container is an included class name assigned to your menu with <div class="container red topBotomBordersOut">.

Unless you have a specific need for having multiple classes assigned to your menu, I would recommend removing the container and red so you are only using a single class name of topBotomBordersOut to keep things simpler until you know you specifically want to use a second class, and that doing so would serve a positive purpose such as being more efficient than simply including all needed styling for that element within a single class.
 
Last edited:
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom