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.
Related
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
Is there any option to change the output of the WP block gallery component in Gutenberg editor?
Currently I set some images with external links (link to media attachment) and I get this result:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
But I want to also set the title attribute for anchor element. This is the result that I want:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
Thanks
You can use the blocks.getSaveElement filter to alter existing blocks. Take a look at this post on Wordpress Development
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!
I trying to put few html elements to show them properly. But could not get how to place them inline.
CODEPEN : CODEPEN DEMO
<div class="jumbotron">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
</a>
<div class="media-body">
<h6 class="media-heading"> This is small description of image </h6>
</div>
</li>
</ul>
<h6>Wat more? ....... </h6>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Only value
</a>
</li>
<span> Above code should look like this </span>
<img src="http://snag.gy/cPTCL.jpg">
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.