8

Responsive CSS Divider in Nav Bar

 2 years ago
source link: http://siongui.github.io/2017/04/21/responsive-css-separator-line-in-navbar/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Responsive CSS Divider in Nav Bar

April 21, 2017

Responsive CSS separator line in nav bar (navigation bar). The CSS divider is vertical on tablet/desktop/wide screen and becomes horizontal on mobile/small screen.

Demo: See navbar of this webpage!

The CSS divider is used to separate items in responsive navbar [2].

HTML:

<span class="vertical-divider"></span>

SCSS: You can compile the SCSS code online.

$mobile: 768px;

.vertical-divider {
  align-items: center;
  display: flex;
  margin: 0.5rem 0.25rem;
  border-right: 2px solid #fafafa;
  border-left: 2px solid #b4b4b4;
  @media (max-width: $mobile) {
    border-top: 2px solid #fafafa;
    border-bottom: 2px solid #b4b4b4;
    margin: 0;
  }
}

Tested on: Chromium Version 57.0.2987.98 Built on Ubuntu , running on Ubuntu 17.04 (64-bit)


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK