I have the following code using TailwindCSS 2:
<div class="hidden lg:inline-block">
<div class="bg-white text-sm w-full pl-4 pr-4 rounded shadow-xl inline-flex flex-grow items-center justify-between mt-4 ">
<div><a class="{{ $btn }}" href="#" role="button" >development news</a></div>
#if (Auth::user()->developer == 1 )
<div><a class="{{ $btn }}" href="#" >developer menu</a></div>
#endif
<div><a class="{{ $btn }}" href="#" >URLs</a></div>
<div><a class="{{ $btn }}" href="#" >how do I?</a></div>
<div><a class="{{ $btn }}" href="#" >view sitemap</a></div>
<div><a class="{{ $btn }}" href="#" >version</a></div>
<div><a class="{{ $btn }}" href="#" >toggle menu items</a></div>
<div><a class="{{ $btn }}" href="#" >highlight menu items</a></div>
<div><a class="{{ $btn }}" href="#" >about White Label Site</a></div>
<div><a class="{{ $btn }}" href="#" >other sites</a></div>
<div><a class="{{ $btn }}" href="#" >newsletters</a></div>
<div><a class="{{ $btn }}" href="#" >uploads</a></div>
<div><a class="{{ $btn }}" href="#" >maintenance & timeout</a></div>
#if (Auth::user()->developer == 1 )
<div><a class="{{ $btn }}" href="#" >library</a></div>
#endif
</div>
</div>
My requirement is to only show this code if it is not a small screen, but it is showing it on small screens.
Help appreciated!
Related
this is my code:
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
App
App
<nav >
{% if user.is_authenticated %}
<a class="nav-link" href="#">Link 1</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.username }}</a>
<div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'listingfournisseur' %}">Update fournisseur list</a>
<a class="dropdown-item" href="{% url 'updatepayables' %}">Eletronic Payment</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'listingclient' %}">Update Clients list</a>
<a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a>
</div>
</li>
</ul>
{% else %}
<a class="p-2 text-dark" href="{% url 'account_login' %}">Log In</a>
<a class="btn btn-outline-primary" href="{% url 'account_signup' %}">Sign Up</a>
{% endif %}
</nav>
</div>
I m tring to have link1 item just on the left of dropdown.
I don t understand why it is up to dropdown ?
this is what I see:
thanks for help
In you nav add the CSS property display: flex and you will have it one next to the other. But after you will just have to play with the size because an tag don't have "padding" but tag have top, left and bottom "padding".
<nav class="b">
<div>ets</div>
<div><ul>test</ul></div>
</nav>
<style>
.b{
display:flex;
}
</style>
I am developing a laravel app. I need two navbars, number Two below number One, one containing logo and logout link, another containing all the links.
I have achieved the look but the dropdown of the logout link is opening in navbar One resulting in increase in the height of the navbar each time the dropdown is toggled.
Images -
Here is my code -
<div id="header-main">
<nav class="navbar navbar-light bg-light" id="header">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('images/accounts.png') }}" height="50px">
</a>
#auth
<div class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
</div>
#endauth
</div>
</nav>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item #if(Route::current()->getName() == 'login') active #endif">
<a class="nav-link" href="{{ route('login') }}"><i class="fas fa-sign-in-alt"></i> {{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item #if(Route::current()->getName() == 'register') active #endif">
<a class="nav-link" href="{{ route('register') }}"><i class="fas fa-user-plus"></i> {{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item #if(Route::current()->getName() == 'home') active #endif">
<a class="nav-link" href="{{ route('home') }}"><i class="fas fa-home"></i> {{ __('Home') }}</a>
</li>
#endguest
</ul>
</div>
</div>
</nav>
Somebody help me.
Use position-absolute on the dropdown menu...
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
username<span class="caret"></span>
</a>
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" >Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> #csrf </form>
</div>
</li>
https://codeply.com/p/fHoKygnLv7
I'm trying to position my Bootstrap badge like the next picture:
But this is what I'm getting:
What am I doing wrong? Or what can I add to my CSS?
This is my code:
<div class="col-md">
<a class="navbar-brand" href="{{ route('user.cart') }}"><i class="fas fa-shopping-cart"></i></a>
<span class="badge badge-pill badge-warning">{{ Session::has('cart') ? Session::get('cart')->totalQty : '' }}</span>
<span class="sr-only">(current)</span></a>
</div>
try this
<div class="col-md">
<a class="navbar-brand" href="{{ route('user.cart') }}">
<i class="fas fa-shopping-cart"></i>
<span class="badge badge-pill badge-warning count-notif">{{ Session::has('cart') ? Session::get('cart')->totalQty : '' }}</span>
<span class="sr-only">(current)</span>
</a>
</div>
add this in css
.count-notif{
vertical-align:middle;
margin-left:-15px;
margin-top: -20px;
font-size:13px;
}
.badge-warning{
padding:3px;
}
I want to set active class to my active routes, i have tried below approach but it is not working
The navside.blade.php page
<ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion">
<li class="no-padding {{ Request::is('/manager/dashboard') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/dashboard')!!}">
<i class="material-icons">settings_input_svideo</i>Dashboard
</a>
</li>
<li class="no-padding {{ Request::is('/manager/orders') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/orders')!!}">
<i class="material-icons">shopping_cart</i>Orders
</a>
</li>
<li class="no-padding {{ Request::is('/manager/outlets') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/outlets')!!}">
<i class="material-icons dp48">store</i>Outlets
</a>
</li>
<li class="no-padding {{ Request::is('/manager/reports') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/reports')!!}">
<i class="material-icons dp48">receipt</i>Reports
</a>
</li>
<li class="no-padding {{ Request::is('/manager/manage') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/manage')!!}">
<i class="material-icons dp48">input</i>Manage
</a>
</li>
</ul>
And my routes are
Route::group(['prefix' => 'manager', 'middleware' => ['auth','roles'], 'roles' => 'manager'], function() {
Route::get('/dashboard', 'ManagerController#index')->name('dashboard');
Route::get('/orders', 'OrdersController#index')->name('orders');
Route::get('/orders/{order_id}', 'OrdersController#show')->name('orderDetails');
Route::post('/assign_orders', 'OrdersController#assignDeliveryBoy')->name('assignOrder');
Route::get('/outlets', 'OutletsController#index')->name('outlets');
Route::get('/reports', 'ReportsController#index')->name('reports');
});
I did tried some different approaches like
1 {{ Request::segment(1) === 'programs' ? 'active' : null }}
2 class="#if(Request::url()== url('/home') active #endif"
but they din't work ether
thank you
You can try:
(Route::current()->getName() == 'routename') ? 'active' : null
You also can make it a helper function instead of copy pasting the full if statement.
I have the following recursive macro which works fine but not the way i want it.
I want to display my menu like in this codepen, hover over services.
How can i get the same structure of the generated html ?
{% extends '::base.html.twig' %}
{% import _self as forms %}
{% macro recursive(item) %}
{% import _self as forms %}
<li class="nav-item">
{% if item.__children|length %}
{% if item.treeLevel == 0 %}
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ item.name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{% for item in item.__children %}
{{ forms.mega(item) }}
{% endfor %}
</div>
{% endif %}
{% endif %}
{% if item.__children is empty %}
<a class="nav-link" href="#">{{ item.name }}</a>
{% endif %}
</li>
{% endmacro %}
{% macro mega(item) %}
{% import _self as forms %}
<ul class="">
{% if item.__children|length %}
{% for item in item.__children %}
{{ forms.mega(item) }}
{% endfor %}
{% endif %}
<li>
<a class="dropdown-item" href="#">{{ item.name }}</a>
</li>
</ul>
{% endmacro %}
{% block body %}
{{ dump(tree) }}
{% if tree %}
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
{% for item in tree %}
{{ forms.recursive(item) }}
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endblock %}
EDIT:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Homepage</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Idea
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<ul class="">
<li>
<a class="dropdown-item" href="#">Company</a>
</li>
</ul>
<ul class="">
<ul class="">
<li>
<a class="dropdown-item" href="#">asdasd</a>
</li>
</ul>
<li>
<a class="dropdown-item" href="#">Services</a>
</li>
</ul>
<ul class="">
<li>
<a class="dropdown-item" href="#">Google</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>