CSS

Many of site you have seen that there is menu separator uses like simple bar, so in this tutorial we can see how we can do that by just using css, like the below image example

image

So for doing this there 2 ways first with before and after property and second with border property of css

1) Using Before and After Property of Css

Suppose this is html 

<ul class="menu-items">
    <li class="menu-leaf"><a href="#">Home</a></li>
    <li class="menu-leaf"><a href="#">Dashboard</a></li>
    <li class="menu-leaf"><a href="#">About</a></li>
    <li class="menu-leaf"><a href="#">Contact</a></li>
    <li class="menu-leaf"><a href="#">Locations</a></li>
  </ul>

And This is css

.menu-items li::after {
        content: "|";
        float: right;
        color: black;
        padding-left: 10px;
        font-size: 20px;
        font-weight: bold;
        padding-right: 8px;
    }
    .menu-items li:last-child::after{
        display: none;
    }

.menu-items {
        list-style: none;
        background: lightblue;
        padding: 20px;
    }
    li.menu-leaf {
        display: inline-block;
    }
    li.menu-leaf a {
        color: black;
        font-size: 20px;
        text-decoration: none;
    }

And 2) using Border property 

HTML as same point 1)

CSS

.menu-items li:last-child {
        border-right: none
        }
    .menu-items {
        list-style: none;
        background: lightblue;
        padding: 20px;
    }
    li.menu-leaf {
        display: inline-block;
        border-right: 1px solid black;
        padding: 0 10px;
    }
    li.menu-leaf a {
        color: black;
        font-size: 20px;
        text-decoration: none;
    }

 

This are two quick ways to achieve the separator between the menu items.


Please Comment your thoughts and feedback below and add something if you found good in anywhere to help others

Hit a like Button If you like the Post.

Many Thanks

Comments

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Other Articles

How you can get Mailchimp API KEY

By Follow steps below, you can find the api key or create the api key at mailchimp and use it to your website to connected the site with mailchimp to collect the subscribe in fastest way.

Print array or object in watchdog drupal 8

Similar to drupal 7, Drupal 8 also provide the logging functionality but little different to use it because the drupal 8 is symphony base architecture, so can use the logger service of drupal 8 to

Embed Google maps on website (Static address )

Here using this website  we can get the embed the static map on our website.

Flexslider Arrows Changed by arrow Images

Flexslider uses the arrows of its own flexslider family icons, if you want to change or replace with yours images you can do using following css.  

Nodejs With Xampp

Hello Guys, We can easily connect the Nodejs with xampp by follow simple steps -

Wordpress Error with php 7.1 - PHP Fatal error: Uncaught Error: [] operator not supported for strings

Hey, This is error caused by php7 and later,many application will face this error Reason behind is that the php 7 will not convert the blank variable with is define as string to array:

Search word or file Using SSH(Putty)

Fastest and efficient way is to use grep command For search in a file :grep "wordtofind" config.php

Drupal Country code default array

include_once DRUPAL_ROOT . '/includes/locale.inc'; country_get_list();  

WAI-ARIA Roles

See Details Here https://www.drupal.org/node/1179668

Drupal 8 add custom menu classes to using menu.html.twig

In Drupal 8 Twig templates give extra power to drupal to add dynamic content in twig style, In this tutorial we can see how we can add the custom menu classes to menu ul li using menu.html.twig.

Drupal 7 content type template

Open the template.php file in your theme for editing. Look for a function called yourthemename_preprocess_page (replace the yourthemename with your theme’s name).

Send Email using smtp module with Gmail

Here is the link that helps to configure stmp module with Gmail configuration and enables drupal

Scroll to top button with html and jquery

Are you searching to add a button scroll to top, then this article is for you.

How To Set or Change Timezone on Ubuntu 18.04 & Ubuntu 16.04

Sometimes we need to check logs or working cron according to our country time, then we need to change the timezone of the server, and if you have ubuntu you can change easily by single command

Drush Installation

Heys, Steps to installing drush using composer on server - login to putty - check the composer is install and working by "composer --version"

Install JAVA 8 on Ubuntu 18.04/16.04

Install java on Ubuntu 1)Install Oracle Java 8 

Enable Drupal 8 Error Reporting

To Enable Drupal 8 Error Reporting, Put This code at top of sites/default/settings.php.

Drupal 7 Multisite setup

Here is some links will helps to create a multisite of drupal 7 

Install Apache Solr on Ubuntu

Install Apache Solr 7.7 on Ubuntu 18.04 & 16.04 LTS This tutorials explains how to install solr 7 on ubuntu system 1) Install or Check Java

Html Dom parser to Extract the HTML data from Html page

Html Dom parser to Extract the HTML data from Html page  See the attached Zip file 

Recent Posts

Create a Flag link programmatically and render flag link in twig template drupal 8

This article is refer to generate the flag link programmatically and render in drupal 8 twig template, before in drupal 7 its was quiet easy to render or generate flag link in just a single line of

Jquery prevent enter to submit form

If you want to prevent the form submit using jquery, then this page helps you to doing this.

Code:

Play Pause HTML5 Video using Jquery

HTML5 video playing on any web page is very easy, in this tutorial we can show you how to add video on html and make it play and pause without using html controls.

Import and Export Drupal 8 Views, Or Import and Export any configuration Drupal 8

Import and Export configuration is the basic protocol to staging the website or production website deployment, In Drupal 7, we need the extra modules to import and export or we can use features mod

How to override different version of Jquery in Drupal 8 using theme

Drupal 8 use its own jquery version by default and if you want to use the other version of jQuery instead of default than this tutorials steps is for you, sometimes we need different version to oth

Subscribe to Mailchimp programmatically via api with PHP

In this tutorial we can see how to subscribe to the mailchimp subscribe list using php programmatically via api,

For this you need a mailchimp account, api key and list id 

How you can get Mailchimp API KEY

By Follow steps below, you can find the api key or create the api key at mailchimp and use it to your website to connected the site with mailchimp to collect the subscribe in fastest way.

How to get your MailChimp LIST ID

Mailchimp is marketing automation platform and is provide email for marketing your product or business whatever you like, today its most trusted service providing all over the globe.

Drupal 8 add custom menu classes to using menu.html.twig

In Drupal 8 Twig templates give extra power to drupal to add dynamic content in twig style, In this tutorial we can see how we can add the custom menu classes to menu ul li using menu.html.twig.

How to create the directories and sub directories in one command linux

Many times we are want to create multiple directories and sub-directories under it and usually we do cd and mkdir one by one, it is very time consuming and it sometimes slow down our workflow.

Create Node drupal 8 programmatically with image upload using custom module

As we know drupal 8 use symphony, so module structure of drupal 8 is change and workflow functionality of doing thing also change.