I would like to move only the logout and {{user.first.name}} to the right. I tried using ms-auto but it didn't work. Am I using it correctly?
{% load static %}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="{% static 'navbar/css/style.css' %}">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Website Monitoring Portal</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'add-url' %}">Add URL</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item ms-auto ">
<a class="nav-link" href = "{% url 'logout' %}">Logout</a>
</li>
<h5 class="li-right" >
<li class="nav-item"> Hello, {{user.first_name}} </li>
</h5>
{% else %}
<li class="nav-item">
<a class="nav-link" href = "{% url 'register' %}">Register</a>
</li>
<li >
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
<form class="d-flex" role="search" method="POST" action="{% url 'search-url' %}" >
{% csrf_token %}
<input class="form-control me-2" type="search" placeholder="Search Url" aria-label="Search" name="searched">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</html>
The Home and Add URL will remain on the left while Logout and 'hello' should be on the right. I tried using CSS and using text-align: right but that did not work also. So now I tried ms auto but it is still not working. Some guidance on this will be really helpful. thank you so much
text-align:right only aligns the text inside of the object. it does not move the object itself.
I would be able to help more if you could also share your css and add a code snipplet.
Did you try using float:right? like so:
<li class="nav-item right-nav-item">
<a class="nav-link" href = "{% url 'logout' %}">Logout</a>
</li>
.right-nav-item{
float:right;
}
Related
So the code below is for Django hence the blocks for the links, they work fine it's just when the screensize is too small the drop down nav doesnt drop down and if i leave it dropped down and make the screen smaller then I can't make it un drop down. Very annoying because I've got the website looking actually nice for once but it does this.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
Try replacing navbar-expand-lg to navbar-expand class on <nav> tag.
"lg" is for larger devices based on responsiveness.
You can check doc here: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
So your code should be:
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
Add aria-expanded="false" on button
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-expanded="false aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
I have a HTML file below. When I make the browser smaller, I can see the hamburger menu, but when I click on it, nothing happens.
<nav class="navbar navbar-expand-lg navbar-light">
Homepage
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<!-- left side -->
</ul>
<ul class="navbar-nav">
<!-- right side -->
{% if user.is_authenticated %}
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">{{user.username}}</a>
</li>
<li>
<a class="nav-link" href="{% url 'logout'%}">Log out</a>
</li>
{% else %}
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="{% url 'login'%}">Log In</a>
</li>
<li>
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
{% endif %}
</ul>
</div>
</nav>
How stupid my mistake was!
I forgot to load bootstrap js files!
Add this:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
to the bottom of your <body>. Further reading about bootstrap CDN
Today's my website is looking like this:
When I connect into my website through mobile, the appearence changes to:
Instead of this, I'd like that the bag image didn't go to the menu - something like this in the right:
My code:
<body>
<!-- jQuery first -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">
<a class="navbar-brand">DeniseAndrade</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
</li>
{% for category in categories %}
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="{% static 'bag1.png' %}" width="25px"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="pb-2 mb-2">
{% block page_header %}{% endblock page_header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
Any help?
Thank you!!
I'm not sure if this is the best practice. But there you go.
I just moved the request tag outside the div collapse navbar-collapse
<a class="nav-link outside__div" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
------
</div>
CSS changes:
.outside__div {
position: absolute;
right: 80px;
}
And that's how it would look like
updated: I think that might be useful. it's all up to you to pick the best way either with position absolute or this one.
HTML:
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">
<a class="navbar-brand">DeniseAndrade</a>
<div class="d-flex flex-row order-2 order-md-3">
<ul class="navbar-nav flex-row ">
<li class="nav-item pr-3">
<a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
</li>
</ul>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 order-md-2" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
</li>
{% for category in categories %}
<li class="nav-item">
<a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
</ul>
</div>
</nav>
Refer to the Bootstrap documentation and see if there is a way to indicate a nav-item that should never get collapsed. At a glance, "External Content" might be what you want?
If all else fails, you could also accomplish this by putting the bag icon in a div outside the navbar and positioning it manually. Of course, this is less than ideal.
I have an app where I want to use a sidebar containing the main URLs and the brand name with a navbar for some other pages like the FAQ and about us.
However, I'm facing a problem in making the positioning of the sidebar absolute. When I was searching I saw this answer of making the bars to prevent them from overlapping.
As you can see the problem is with the sidebar.
Here's the HTML:
<div class="row">
<div class="col-md-2 bg-dark">
<!-- sidebar -->
<nav class="navbar navbar-light bg-dark" id="sidebar">
<ul class="navbar-nav mr-auto">
<div class="brand-panel">
<li class="nav-item active">
<a class="navbar-brand" href="{% url 'home' %}"><h5>Sentizer <small class="one" > Beta</small></h5></a>
</li>
</div>
<li class="nav-item active">
<a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
</li>
<li class="nav-item">
<button type ="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
</li>
</ul>
</nav>
</div><!-- sidebar -->
<div class="col-md-10">
<div class="row">
<div class="col-md-12 px-0">
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1" >
<div class="container-fluid">
<form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET" >
<input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
<button class="btn btn-outline-primary btn-sm" type="submit" ><i class="material-icons">search</i></button>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'faq' %}">FAQ</a>
</li>
<li class="nav-item">
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
</li>
<li class="dropdown-item text-nowrap">
<a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
</li>
</ul>
</li>
<li class="nav-item">
<i class="fa fa-search fa-lg"></i>
</li>
{% else %}
<li class="nav-item text-nowrap">
<a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div><!-- navbar -->
</div>
I tried changing the positioning of <nav class="navbar navbar-light bg-dark" id="sidebar"> but it didn't work as it's relying on the background div before it.
How can I fix this and is there a better approach to make to bars in the page without any overlapping issues?
You will need to extend your 'app container' (here your first div#app) to screen height using height: 100vh. Please try it on full page :
#app {
height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="app" class="row">
<div class="col-md-2 bg-dark">
<!-- sidebar -->
<nav class="navbar navbar-light bg-dark" id="sidebar">
<ul class="navbar-nav mr-auto">
<div class="brand-panel">
<li class="nav-item active">
<a class="navbar-brand" href="{% url 'home' %}">
<h5>Sentizer <small class="one"> Beta</small></h5>
</a>
</li>
</div>
<li class="nav-item active">
<a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
</li>
<li class="nav-item">
<button type="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
</li>
</ul>
</nav>
</div><!-- sidebar -->
<div class="col-md-10">
<div class="row">
<div class="col-md-12 px-0">
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1">
<div class="container-fluid">
<form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET">
<input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
<button class="btn btn-outline-primary btn-sm" type="submit"><i class="material-icons">search</i></button>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'faq' %}">FAQ</a>
</li>
<li class="nav-item">
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
</li>
<li class="dropdown-item text-nowrap">
<a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
</li>
</ul>
</li>
<li class="nav-item">
<i class="fa fa-search fa-lg"></i>
</li>
{% else %}
<li class="nav-item text-nowrap">
<a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div><!-- navbar -->
</div>
I'm trying to implement a bootstrap dropdown menu, despite the right class being applied to the sublist, I'm losing my formatting and the padding that normally applies to bootstrap.
I'm using bootstrap 4.0.0-alpha.2 as follows:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs navbar-collapse" id="exCollapsingNavbar2">
<a class="navbar-brand" href="{% url 'home' %}"><img width="140" src="{% static 'images/openopps_logo.png' %}"</a>
<ul class="nav navbar-nav">
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'pricing' %}">Pricing</a></li>
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'home' %}">Blog</a></li>
<li class="nav-item oo-roboto-override dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="{% url 'about' %}">
About
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Vision</li>
<li>Our company</li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
{% if user.is_authenticated %}
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_logout' %}"><button class="btn btn-sm btn-oo-outline">Logout</button></a></li>
{% else %}
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'registration_register' %}"><button class="btn btn-sm btn-oo">Sign Up</button></a></li>
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_login' %}"><button class="btn btn-sm btn-oo-outline">Login</button></a></li>
{% endif %}
</ul>
</div>
</nav>
Bootstrap 4 has an extra class required for dropdown menus. Using the following class in the <li> tags works.
<li class="dropdown-item">Vision</li>