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.
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.
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;
}
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
Are there any tutorials or templates created with wordpress+timber+bootstrap?
I'm having problem with the menu...
menu-head.twig:
<nav class="navbar navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{% include "menu.twig" with {'menu': menu.get_items} %}
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
menu.twig:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
and the unfortunate result is this one:
I don't know how to implement it with the child menus being shown as dropdown menus... please help...
EDIT: I will be moving to foundation... :)
#manson-mamaril you're just missing a small bit in menu.twig. Instead of {% for item in menu %} it should be {% for item in menu.get_items %}:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#}
{% for item in menu.get_items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}}
{% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
I came across a blog post from about a year ago while searching for WP-Timber-Foundtion 6 info.
http://kmturley.blogspot.com/2015/01/wordpress-timber-twitter-bootstrap.html
Something like this should work
<div class="collapse navbar-collapse" id="navbarmain">
<ul class="nav navbar-nav main-menu">
{% for item in menu.get_items %}
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{{item.get_link}}">{{item.title}}<b class="caret"></b></a>
{% if item.get_children %}
<ul class="dropdown-menu" role="menu">
{% for child in item.get_children %}
<li>{{child.title}}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
In your menu-head.twig, replace {% include "menu.twig" with {'menu': menu.get_items} %} by {% include "menu.twig" with {'menu': menu} %}
Then, in your menu.twig
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu.items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
You should iterate trough menu.items which is an array containing all your menu items.
By the way, make sure, you pass your menu to the context :
$context['menu'] = new \Timber\Menu(ID);
Finally, if you easily want to see what happens in you menu object, you can display this object with menu|print_r