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

Other Articles

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

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:

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 

Drupal site maintenance not affecting front page

function HOOK_preprocess_page(&$vars) { global $user;

Bootstrap 4 Uncaught TypeError: Cannot read property 'fn' of undefined

while using bootstrap 4 we usually get this kind of error and jquery bootstrap.min.js is working correctly Error  is:

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).

Import Database using xampp mysql command prompt windows

As we all know the xampp is most popular tool at machine level programming work, but sometime we need to deal with the bigger databases to import into mysql of xampp that provide and we import that

Change all files and folders permissions of a directory to 644/755

Find is best command to apply permission to directories and files recursively to all . For Directories

WAI-ARIA Roles

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

How to Install Civicrm into Drupal 7

There is a direct guide available on CiviCRM Website, Here we follow faster steps to do the same.

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:

Slice array Elements using Keys PHP

Many Helpful Function are available to exact the specific set of keys of an array $sliced-arr = array_slice($new_tags, 0, 6);

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.

[SOLVED] PHP executable not found. Install PHP 7 and add it to your PATH or set the php.executablePath setting

If you get the same error like below in VScode editor then you are the right place to 

Embed Google maps on website (Static address )

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

send Variable to Js File From PHP in drupal Custom Module

If we need to use the php variable in our js file we can use Core Drupal.settings Functionality :  example:

Render a drupal node d7

If you want to render a node in drupal 7 it is pretty easy, you just a node id or nid of node for doing this: simply

Getting permission error when installing CiviCRM under Drupal with Xampp

If you are getting permission error while installing CiviCRM on xampp then, its is default CiviCRM user permission error,

Convert a certificate into the cer,crt,der,pem format

For different reason we need the different format of certificates for different operating system, many of sites offering you to convert the certificates in different format online but if you have b

Drupal 8 Theming Essential Guide

What's new? I’ll list some changes with the theming system of Drupal 8 compared to Drupal 7. You may have got familiar with these in the Drupal 7 version.

Fix Bug Phpmyadmin [sql.lib.php] + Php7.2 + Ubuntu 16.04

I have faced this error recently , look like this    Warning in ./libraries/sql.lib.php#601

Use Drush in Cron to execute the task in multiple Drupal Instance..

As many of us using drush as command line tool for drupal for various task because it is easy to use and save time for searching dependency of module and libraries for various of module, In this tu

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 54 bytes)

Sometimes we get this php error on long page load or load many files are at once Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 54 bytes)

Facebook post customisation posted using web app using Facebook Open Graph

Facebook is Providing autoposting functionality using website application and provides to display you website content on your facebook page.

Recent Posts

Drupal 8: check user is logged in or not in *.html.twig

In the new era the drupal8 twig is introduce, so old basic php drupal hook is not useful in theme templates.

Add text to ckeditor textarea using jquery

In most of case we need to add or fill up form fields using jquery or Js, if you have trobble in loading data in textarea having ckeditor working already then this tutorial helps you.

How to Add a Custom Date Format in Drupal 8

In drupal 8 there is easiest way to add the date format is simply go link for your website

Retrieve the query used in mysql views

we can create the database views for many reason, but if we forget what query you was used to create the views or need to find out using which query results are generating here is the solution:

Send file as Email attachment using hook_mail_alter drupal 7 programmatically (example webform submit)

Hi guys,

In this tutorial we can see how we can send files as attachments in drupal 7 on webform submit using a hook_mail_alter 

[SOLVED] PHP executable not found. Install PHP 7 and add it to your PATH or set the php.executablePath setting

If you get the same error like below in VScode editor then you are the right place to 

Redirect Old Domain to New Domain via .htaccess

Usually we develop the site on developement or subdomain and when we finally mirgate the to new domain then some of thing will remain or page redirect happens in  sometimes , so In this case .htacc

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