I would like to list a WordPress menu without list items.
For example:
<div class="nav-start">
<a class="item">
Home
</a>
<a class="item">
Menu
</a>
<div class="item-with-submenu">
<a class="parent-link">
Menu with submenu
</a>
<div class="dropdown-child">
<a class="item">
Menu
</a>
<a class="item">
Menu
</a>
<a class="item">
Menu
</a>
</div>
</div>
</div>
But it's not working, becasue I can't list the name of parent menu in submenu div, just before the div.
I tried this WordPress function: wp_get_nav_menu_items()
Do you have any tip? Thank you!
Related
i have boostrap3 carosal. i have horizantal menu over the carosal . how can i make it vertical right side of the slider without right margin.
<section>
<div class="container">
<div class="row">
<div class="wed-hom-ser">
<ul>
<li>
Contact Us
</li>
<li>
Share
</li>
<li>
Call Us
</li>
<li>
<img src="images/icon/h-ic3.png" alt=""> Whats App
</li>
</ul>
</div>
</div>
</div>
</section>
I have an Accordion which has a header, inside which I need to place a dropdown menu. I've tried fiddling with the z-index thinking it was a stacking issue to no avail. I've reproduced the issue with a minimal sample at https://www.bootply.com/53bH05eQlf
Is there any way to get the dropdown menu to display correctly?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah
<div class="dropdown text-center show border-info border rounded menu-button float-left">
<a class="btn p-0 dropdown-toggle" href="#" role="button" id="some-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-bars"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="some-dropdown">
<li class="dropdown-item">Hidden behind the card!</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
</div>
Adding style="overflow: visible" to the card div which contains the dropdown will solve the issue.
That is, for the bootply example replace <div class="card"> on line 8 with <div class="card" style="overflow: visible">.
I m using Clarity Design System with angular and the top menu is not mobile response
<header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">title</span>
</a>
</div>
<div class="header-nav">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text"
routerLink="/login">Login</a>
</div>
</header>
I m expecting the top menu to turn into few lines (button) when the width is reduce
Or should I use different tags ?
To use responsive navigation, see the documentation on it at https://v2.clarity.design/navigation. You need to use the clr-main-container and clr-header elements to enable this behavior.
Given your markup, it should be something like the following.
<clr-main-container>
<clr-header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">title</span>
</a>
</div>
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text" routerLink="/login">Login</a>
</div>
</clr-header>
<div class="content-container">
<main class="content-area">
... the main body content goes here, probably a router-outlet
</main>
<nav class="sidenav" [clr-nav-level]="2">
... if you want a sidenav that is, or omit this
</nav>
</div>
</clr-main-container>
Yes it is working perfect now, it solved the behavior
So now is:
<clr-main-container>
<clr-header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">{{title}}</span>
</a>
</div>
<div class="header-nav" [clr-nav-level]="1">
<div class="header-nav">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text" routerLink="/login">Login</a>
</div>
</div>
</clr-header>
Thank you very much
Can someone tell me please how can i have different top menu when scrolling. You can see example on this site http://www.pizzafan.gr. It is static menu and if you scroll the menu items are changing.
You need to replace some coding in your header.html
First, you need to replace your below code:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
</div>
From:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
<ul class="quick_menu">
<li class="first desktop">
<a href="http://www.pizzafan.gr/el">
<img src="/assets/site/images/home.png" alt="" class="desktop">
<!--<img src="/assets/site/images/home-mobile.png" alt="" class="mobile" height="18">-->
<span>Αρχική</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/menu/pizzas">
<img src="/assets/site/images/slice.png" alt="" class="desktop">
<img src="/assets/site/images/slice-mobile.png" alt="" class="mobile" height="18">
<span>Menu</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/restaurants">
<img src="/assets/site/images/shopping.png" alt="" class="desktop">
<img src="/assets/site/images/shopping_mobile.png" alt="" class="mobile" height="18">
<span>Καταστήματα</span>
</a>
</li>
<li class="hover" data-toggle="modal" data-target="#callBackModal">
<a href="javascript:void();" class="callmeback">
<img src="/assets/site/images/call.png" alt="" class="desktop">
<img src="/assets/site/images/call_mobile.png" alt="" class="mobile" height="18">
<span>Call Me Back</span>
</a>
</li>
</ul>
</div>
And Then, change your static menu images with this color code: #00742D
just make your menu images with above mention color code.
and you will see same menu items in your scrolling menu check this similar scrolling menu example.. Menu both in simple and scrolling with same menu items/ options.
I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/
What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.
The latest bootstrap comes with a .caption class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:
<ul class="thumbnails">
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
</ul>
<hr>
<ul class="thumbnails">
<li class="span4">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
</ul>
You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:
.caption {
text-align:center;
}
Demo: http://jsfiddle.net/2BBnR/
Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.
HTML
<li>
<a href="#">
<legend >Caption</legend>
<img class="thumbnail" src="http://placehold.it/140x90" alt="">
</a>
</li>
CSS
legend { margin:3px; text-align:center;width:100%}
Working DEMO
Just use the <legend> tag before or after each image, and add the text-align:center style to the image grid.
See this demo, it works great.