Code Snippets

wild-web-dev's photo

Published on Jul 19, 2021

The only way to achieve this navbar on mobile view is through float. I could not do with flexbox.

navbar in two columns on mobile.PNG

This is the image on top of navbar


nav {
  background: url(../img/scallop.png) repeat-x;
nav ul.full-width {
  list-style-type: none;
  background-color: #e6bf98; 
  padding: .75em;
  margin: 12px 0 0 0;
  border-bottom: 3px solid #cc8850;
  overflow: auto;

/* splits nav into 2 columns
simple-2-column-navigation-with-css-and-a-single-list */
nav li:nth-child(even) {
  width: 50%;
  float: right;
  padding: 0.5em;
nav li:nth-child(odd) {
  width: 50%;
  float: left;
    padding: 0.5em;
nav a {
  color: #c80060;
  text-decoration: none;
  display: block;
nav a:hover {
Share this