1

I am trying to split the home and others I have looked online and I cant find anything that has worked. I am using flask and bootstap 4.4.1 If you need to see more of the code please ask. It would mean a lot if you could help.

My navbar right now

Example of what I would like it to look like

      <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
      <div class="navbar-nav ml-auto">
        {% if user.is_authenticated %}
        <a class="nav-item nav-link" id="home" href="/">Home</a>
        <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
        <a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
        {% else %}
        <a class="nav-item nav-link" id="home" href="/">Home</a>
        <a class="nav-item nav-link" id="login" href="/login">Login</a>
        <a class="nav-item nav-link" id="signUp" href="/sign-up">Sign Up</a>
        <a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
        {% endif %}
      </div>
  </div>
</nav>
Ash
  • 19
  • 1

1 Answers1

0

Had the same issue for days. Attached is what I did. Probably not right or maybe not what you are looking for but it worked for me. New here also. If you find an easier way would love to see it.

https://pasteboard.co/YLamsdKPZx5L.png

     html section
 
    <div class="cont1">
          <div class="head1">Pamela C. Green Photography</div>
          <div class="head2">Menu</div>
    </div>
    
    
   css section


   .cont1 {
       display: flex;
   }

   .head1 {
       flex: 1;
       text-align: left;
       font-size: 60px;
       font-family: 'Parisienne', cursive;
       font-weight: 400;
       margin: 40px 20px 20px 20px;
       padding-left: 30px;
   }

   .head2 {
       flex: 1;
       text-align: right;
       padding: 10px 30px 0px 0px;
       font-size: 20px;
   }
Kathadris
  • 1