How do I align this menu properly? I have tried using inline-block for the li tag but that didn't align this.
Here's the current code, please help with ideas
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %}">Active Listings</a>
</li>
<li class="nav-item">
Category
</li>
<li class="nav-item">
Sell
</li>
</ul>
<ul class="navbar-nav ml-auto">
<div>
{% if user.is_authenticated %}
welcome, <strong>{{ user.username }}</strong>.
{% else %}
Not signed in.
{% endif %}
</div>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</nav>
Try to add display flex and align items center. this will 100% solve your problem
ul {
display: flex;
align-items: center;
}
Related
Here is a code for my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
And here is my .css file for paddings, and I am guessing that something has to be added here, but I can't figure out what..
#media (min-width: 992px) {
.navbar-nav > .nav-item {
padding-right: 1.5rem;
}
}
#media (min-width: 992px) {
.navbar-brand {
padding-right: 2rem;
}
}
What happens is this:
Wrong alignment
What do I need to do, to get the right side of the navbar to verically align with other items? I have tried to include style="vertical-align:middle to the .css file and to nav-item and nav-link, but it doesn't help.
there is problem with P tag which has text 'Logged in As'.
P tag has margin bottom which is creating problem with alignment.
so you can remove that margin using mb-0 class.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text mb-0">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
I set up a project for test purpose, it works. But in another project, the above code doesn't work. The content of the turbo-stream appears in raw html and replaces the whole site.
//_parts/_dashboard_user_ranking.stream.html.twig
<turbo-stream action="update" target="the_frame_id" >
<template>
{{ include ("_parts/_dashboard_user_ranking.html.twig") }}
</template>
</turbo-stream>
//index.html.twig
{% block body %}
{{ parent()}}
<main class="container row overflow-auto">
<div class="col-md-10 mx-auto">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="{{ path('app_dashboard_rankings',{period:'5jours'}) }}">5 jours</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'3mois'}) }}">3 mois</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an'}) }}">1 an</a>
</li>
{% for group in groups %}
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an', groupID:group.id}) }}">{{ group.groupName }}</a>
</li>
{% endfor %}
</ul>
<turbo-frame id="the_frame_id"></turbo-frame>
</div>
</main>
{{ include ("footer.html.twig") }}
{% endblock %}
And finally the controller :
// classements seuls
#[Route('/classements-{period}-{groupID}', name: 'app_dashboard_rankings')]
public function classements(
Request $request,
FollowPointsRepository $followPointsRepository,
string $period = '5jours',
int $groupID = 0
): Response
{
// ...
// ...
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
return $this->render('_parts/_dashboard_user_ranking.stream.html.twig',[
'isUserInTop'=>$isUserInTop,
'classement'=>$classement
]);
}
As for the config, it is the same as in the test purpose project.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Here is my code:
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
<div class="container">
<a class="navbar-brand mynav" href="{% url 'home' %}">Star Social</a>
<ul class="navbar-nav navbar-right">
{% if user.is_authenticated %}
<li>Posts</li>
<li>Groups</li>
<li>Create Group</li>
<li>Logout</li>
{% else %}
<li>Group</li>
<li>Login</li>
<li>Signup</li>
{% endif %}
</ul>
</div>
</nav>
I have a code like this but when I run the server, I'm getting style like this.
In Your bootstrap code tag you forgot to add class in <li> and <a> and you must replace the class in ul tag navbar-right to ml-auto here i will change
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
<a class="navbar-brand" href="{% url 'home' %}">Star Social</a>
<ul class="navbar-nav ml-auto">
<!-- {% if user.is_authenticated %} -->
<li class="nav-item active"><a class="nav-link" href="">Posts</a></li>
<li class="nav-item"><a class="nav-link" href="">Group</a></li>
<li class="nav-item"><a class="nav-link" href="">Create Group</a></li>
<li class="nav-item active"><a class="nav-link" href="{% url 'accounts:logout' %}">Logout</a></li>
<!-- {% else %} -->
<li class="nav-item"><a class="nav-link" href="">Group</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'accounts:login' %}">Login</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'accounts:signup' %}">Signup</a></li>
<!-- {% endif %} -->
</ul>
</nav>
Above try but it not collapse if you want do same please refer a docs of bootstrap here i give link Bootstrap Navbar it work make right so let me know
I using bootstrap(4) but the navbar for small viewports doesn't show the hamburger icon. I think the issue could be the asset isn't loading properly, but I can see it being fetched in chrome dev tools-> network.
(website is based on this template
https://wrapbootstrap.com/theme/velocity-for-products-bootstrap-4-WB0N38R04)
Navbar html
<header id="header" class="header navbar-fixed-top">
<div class="container">
<h1 class="logo">
<span class="text">Cheaper</span>
</h1><!--//logo-->
<nav class="main-nav navbar navbar-right navbar-inverse navbar-expand-md" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button><!--//nav-toggle-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
</li>
<li class="nav-item nav-item-cta last">
<a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
<li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary"
href="{% url 'users:postcode' %}">Sign Up</a></li>
{% endif %}
</ul><!--//nav-->
</div><!--//navbar-collapse-->
</nav><!--//main-nav-->
</div><!--//container-->
</header><!--//header-->
css class for the icon
.navbar-toggler-icon {
background: transparent url('../images/hamburger-icon.svg') no-repeat center center;
}
You could use some thing like this. I have changed button to a link. And did changes in the .navbar-toggler-icon class as well.
.navbar-toggler-icon {
background: url('https://image.flaticon.com/icons/svg/198/198416.svg')no-repeat center center;
display: inline-block;
height: 17px;
width: 50px;
}
<header id="header" class="header navbar-fixed-top">
<div class="container">
<h1 class="logo">
<span class="text">Cheaper</span>
</h1>
<!--//logo-->
<nav class="" role="navigation">
<a href="" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</a>
<!--//nav-toggle-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
</li>
<li class="nav-item nav-item-cta last">
<a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
<li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="{% url 'users:postcode' %}">Sign Up</a></li>
{% endif %}
</ul>
<!--//nav-->
</div>
<!--//navbar-collapse-->
</nav>
<!--//main-nav-->
</div>
<!--//container-->
</header>
<!--//header-->
I have a bootstrap menu whith a dropdown. It used to work but something happened. I click on it and nothing happens.
<ul class="nav navbar-nav navbar-right">
<li class="{% if this.page.id == 'home' %}active{% endif %}">Főoldal</li>
{% if user %}
<li class="dropdown">
{{ user.name }}<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>New post
</li>
<li class="divider"></li>
<li><a data-request="onLogout" data-request-data="redirect: '/good-bye'">Logout</a>
</li>
</ul>
</li>
{% else %}
<li class="">Login</li>
{% endif %}
</ul>
At the bottom:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{{ 'assets/js/bootstrap.min.js'|theme }}"></script>
Update: Checked with the original example but still not working so the problem is somewhere in the js part. But the JS is there.
u missed a </ul> after {% endif %}
see http://jsfiddle.net/26vpc9o3/1/
<ul class="nav navbar-nav navbar-right">
<li class="{% if this.page.id == 'home' %}active{% endif %}">Főoldal</li>
{% if user %}
<li class="dropdown">
{{ user.name }}<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>New post</li>
<li class="divider"></li>
<li><a data-request="onLogout" data-request-data="redirect: '/good-bye'">Logout</a></li>
</ul>
</li>
{% else %}
<li class="">Login</li>
{% endif %}
</ul>
Solved. The bootstrap js was included twice. I didnt noticed it because the bootstrap wasnt in its name.