Twitter Bootstrap Question posted in

Why my elements are not horizontal into my navigator-Twitter bootstrap

My goal is to get this result:

enter image description here

Visibly, I have a problem with my navigator see below

enter image description here

My problem is that, I am trying to put my elements horizontal with a display: flex, but I always have the same problem.

.navbar .navbar-nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;

}

I just want to know how to align my pages horizontal please?

Here is my code in full.

Thank you in advance for your help and your time.

/*******************************/
/********* General CSS *********/
/*******************************/

body {
    color: #797979;
    background: pink;
    font-family: 'Open Sans', sans-serif;
    margin: 0; 
    padding: 0;
}

h1,
h2, 
h3, 
h4,
h5, 
h6 {
    color: #343148;
}


.container-fluid { 
    max-width: 1366px;
    justify-content: space-between;
    display:flex;
}

a {
    color: #454545;
    transition: .3s;
}

a:hover,
a:active,
a:focus {
    color: #F7CAC9;
    outline: none;
    text-decoration: none;
}


/**********************************/
/********** Top Bar CSS ***********/
/**********************************/


.top-bar {   
    position: relative;
    height: 35px;
    background: #343148;
}

.top-bar .top-bar-left {  
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.top-bar .text { 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 35px;
    padding: 0 10px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .text i {  
    font-size: 13px;
    color: #ffffff;
    margin-right: 5px;
}

.top-bar .text h2 { 
    color: #eeeeee;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0;
}

.top-bar .text p { 
    color: #eeeeee;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 0 5px;
}

.top-bar .text:last-child { 
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .top-bar-right { 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.top-bar .social { 
    display: flex;
    height: 35px;
    font-size: 0;
    justify-content: flex-end;
}

.top-bar .social a { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 100%;
    font-size: 16px;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .social a:first-child { 
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .social a:hover {  
    color: #092a49;
    background: #ffffff;
}

/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/


.navbar {
    position: fixed;
    top: 35px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1); 
}

.navbar .navbar-brand {   
    margin: 0;
    color: #ffffff;
    font-size: 45px;
    line-height: 0px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: .5s; 
}

.navbar .navbar-brand span { 
    color: #343148;
    text-transform: lowercase;
    transition: .5s;
}

.navbar .navbar-nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;

}
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>YOOGA </title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="Free Website Template" name="keywords">
        <meta content="Free Website Template" name="description">

        <!-- Favicon -->
        <link href="img/favicon.ico" rel="icon">

        <!-- Google Font -->
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">

        <!-- CSS Libraries -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/flaticon/font/flaticon.css" rel="stylesheet"> 
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/header.css">
    </head>

  <body>
      <!-- Top Bar Start -->
      <div class="top-bar">
        <div class="container-fluid">
              <div class="top-bar-left">
                <div class="text">
                  <i class="far fa-clock"></i>
                  <h2>8:00 - 9:00</h2>
                  <p>Mon - Fri</p>
                </div>
                <div class="text">
                  <i class="fa fa-phone-alt"></i>
                  <h2>+123 456 7890</h2>
                  <p>For Appoitment</p>
                </div>
              </div>
              <div class="top-bar-right">
                <div class="social">
                    <a href=""><i class="fab fa-twitter"></i></a>
                    <a href=""><i class="fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-linkedin-in"></i></a>
                    <a href=""><i class="fab fa-instagram"></i></a>
                </div>
              </div>
        </div>
      </div>
      <!-- Top Bar End -->

      <!-- Nav Bar Start -->
      <div class="navbar">
        <div class="container-fluid">
            <a href="index.html" class="navbar-brand">Y<span>oo</span>ga</a>

            <div class="navbar-nav">
              <a href="index.html" class="nav-link active">Home</a>
              <a href="about.html" class="nav-link active">About</a>
              <a href="service.html" class="nav-link active">Service</a>
              <a href="price.html" class="nav-link active">Price</a>
              <a href="class.html" class="nav-link active">Class</a>
              <a href="team.html" class="nav-link active">Trainer</a>
              <a href="portfolio.html" class="nav-link active">Pose</a>
              <div class="dropdown">
                  <a href="#" class="nav-link" data-toggle="dropdown">Blog</a>
                  <div class="dropdown-menu">
                      <a href="blog.html" class="dropdown-item">Blog Grid</a>
                      <a href="single.html" class="dropdown-item">Blog Detail</a>
                  </div>
              </div>
              <a href="contact.html" class="nav-link">Contact</a>
              </div>
        </div>
      </div>
      <!-- Nav Bar End -->

  </body>
</html>
Tags:

2

Answers


  1. 0

    just change .navbar-nav to

    .navbar-nav {
    display: flex;
    flex-direction: row; /* this does the trick */
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
    Login or Signup to reply.
  2. 0

    Your problem is this line: flex-direction: column;

    You should change it or add below Css:

     .navbar-nav {
        display: flex;
        -ms-flex-direction: inherit;
        flex-direction: inherit;
    }
    .navbar-nav .nav-link {
        padding: 15px;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search