center menu items will be displayed as a fallback in case flexbox is unavailable

The code I have creates space between menu items and centers them both horizontally and vertically within each item.

This is achieved by using a wrapper for the menu items:

.gel-layout {
    list-style: none;
    direction: ltr;
    text-align: left;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
    margin-right: 0;
    margin-left: -8px;
    padding-right: 0;
    padding-left: 0;
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
}

.gel-layout--middle {
    align-items: center;
}

And for each individual item:

.gel-layout__item {
    width: 100%;
    display: inline-block;
    padding-left: 8px;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto;
}

.gel-layout--fit > .gel-layout__item {
    width: auto;
    flex: 1 1 auto;
}

.gel-layout--equal > .gel-layout__item {
    display: flex;
}

.gel-layout--middle > .gel-layout__item {
    vertical-align: middle;
}

Is it possible to achieve the same effect for browsers that do not support flexbox?

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1;
  height: 100%;
  text-rendering: optimizeSpeed;
}

body {
  font-size: 160%;
  margin: 0;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* autoprefixer: off */


/**
     * Grid containing element
 */

a {
  color: #fff;
}

path {
  fill: #ffffff;
}

.menu__container:after {
  content: '';
  display: table;
  clear: both;
}

.menu__container ul li {
  display: inline-block;
  vertical-align: middle;
}

.menu__container ul li a {
  padding-left: 1rem;
}

.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 80em) {
  .gel-wrap {
    max-width: 1280px;
  }
}


/**
     * A grid row
 */

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

@media (min-width: 37.5em) {
  .gel-layout {
    margin-left: -16px;
  }
}

.opera-only:-o-prefocus,
.gel-layout {
  word-spacing: -0.43em;
}


/**
     * A single grid item
 */

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

@media (min-width: 37.5em) {
  .gel-layout__item {
    padding-left: 16px;
  }
}


/**
     * Layouts with no gutters.
 */

.gel-layout--flush {
  margin-left: 0;
}

.gel-layout--flush>.gel-layout__item {
  padding-left: 0;
}


/**
     * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
     * markup will display in order 4, 3, 2, 1 on your page
     */

.gel-layout--rev {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.no-flexbox .gel-layout--rev {
  direction: rtl;
  text-align: left;
}

.no-flexbox .gel-layout--rev>.gel-layout__item {
  direction: ltr;
  text-align: left;
}


/**
     * Align layout items to the vertical centers of each other
     */

.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.gel-layout--middle>.gel-layout__item {
  vertical-align: middle;
}


.gel-layout--center {
  text-align: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.gel-layout--auto>.gel-layout__item {
  width: auto;
}


.gel-layout--no-flex {
  min-width: 100%;
}

.gel-layout--no-flex,
.gel-layout--no-flex>.gel-layout__item {
  display: block;
  display: inline-block;
}


.gel-layout--equal>.gel-layout__item {
  display: -webkit-flex;
  display: flex;
}


/**
         * Allow items to devide the space equally between the number of items
         */

.gel-layout--fit>.gel-layout__item {
  width: auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}


/**
         * Align a single grid item to the top
         */

.gel-layout__item--top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}


/**
         * Align a single grid item to the center
         */

.gel-layout__item--center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}


/**
         * Align a single grid item to the bottom
         */

.gel-layout__item--bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Cutting-Edge Solutions (Scotland)</title>
</head>

<body>
  <div id="root">
    <header role="banner" aria-label="Cutting-Edge Solutions (Scotalnd)">
      <nav class="menu__container">
        <div class="gel-wrap">
          <div class="gel-layout gel-layout--middle gel-layout--equal gel-layout--fit">
            <div class="gel-layout__item      ">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                  <path d="M20 0 L40 20 L20 40 L0 20"></path>
                </svg>
            </div>
            <div class="gel-layout__item      "><a href="/">Home</a></div>
            <div class="gel-layout__item      "><a href="/oss">OSS</a></div>
            <div class="gel-layout__item      "><a href="/blog">Blog</a></div>
            <div class="gel-layout__item      "><a href="/privacy-policy">Privacy Policy</a></div>
          </div>
        </div>
      </nav>
    </header>
    <div class="gel-wrap">
      <h1>Home</h1>
    </div>
  </div>
</body>

</html>

htmlcss

Answer №1

CSS Tables are a great solution for this task:

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1;
  height: 100%;
  text-rendering: optimizeSpeed;
}

body {
  font-size: 160%;
  margin: 0;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* autoprefixer: off */


/**
     * Grid containing element
 */

a {
  color: #fff;
}

path {
  fill: #ffffff;
}

.menu__container:after {
  content: '';
  display: table;
  clear: both;
}

.menu__container ul li {
  display: inline-block;
  vertical-align: middle;
}

.menu__container ul li a {
  padding-left: 1rem;
}

.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 80em) {
  .gel-wrap {
    max-width: 1280px;
  }
}


/**
     * A grid row
 */

.gel-layout {
  list-style: none;
  direction: ltr;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

.gel-layout__item {
  display: table-cell;
  padding-left: 8px;
  text-align: left;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}
<nav class="menu__container">
  <div class="gel-wrap">
    <div class="gel-layout gel-layout--middle gel-layout--equal gel-layout--fit">
      <div class="gel-layout__item      ">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                  <path d="M20 0 L40 20 L20 40 L0 20"></path>
                </svg>
      </div>
      <div class="gel-layout__item      "><a href="/">Home</a></div>
      <div class="gel-layout__item      "><a href="/oss">OSS</a></div>
      <div class="gel-layout__item      "><a href="/blog">Blog</a></div>
      <div class="gel-layout__item      "><a href="/privacy-policy">Privacy Policy</a></div>
    </div>
  </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on creating a slow and gradual border animation that unfolds smoothly

I am looking to create an animation effect on a border, gradually revealing it like in this Codepen example. However, my specific requirements are: The previous line should not be removed, but rather shown along with the new border. The border color ...

javascripthtmlcss

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

htmlcss

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss

Switching the WordPress dropdown menu from a hover function to a click function

Is it possible to modify the WordPress menu dropdown behavior from hover to onclick? I want the menu to appear when an item is clicked, but WordPress currently requires hovering. Below is what I've tried so far, but it has not been successful. Jquery ...

jqueryhtmlcsswordpress

What is the best way to adjust a wide HTML table to make it narrow enough to fit perfectly within the screen width?

I need assistance with formatting an HTML table that contains multiple columns: <table id="req_header" border="2" style="overflow: auto;"> <tr> <th><i class="fa fa-solid fa-check"> ...

javascripthtml

Disabling the outline border on bootstrap select elements

I have integrated this plugin into my project and I am attempting to eliminate the blue border when the select box is focused. I attempted to achieve this by setting the outline to none using the following code: *:focus { outline: 0!important; } Additi ...

htmlcsstwitter-bootstrap

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

Choosing an option on a WordPress admin page may vary depending on the selection of another

I am facing a challenge with my code that involves two selections: category and type. The type selection should be dependent on the category selected from the database. Here is a snippet of my code: HTML $ps_type_table_name = $wpdb->prefix . 'ps_ ...

phpjqueryhtmlajaxwordpress

Forming a header area by utilizing a 960 Grid container

I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...

htmlcss960.gs

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

Looking to create a sticky bar with a smooth CSS transition instead of the current rough effect. Any tips or hints would be greatly appreciated! For reference, I found the exact animation I'm aiming for on this website: https://css-tricks.com/ Here i ...

jquerycss

CSS code to modify background color upon mouse hover

I am currently working on creating a navigation menu. Check out the code snippet here: http://jsfiddle.net/genxcoders/ZLh3F/ /* Menu */ .menu { height: 100px; float: right; z-index: 100; } .menu ...

htmlcss

Angular input range slider that automatically rounds decimal values from the data bindings

I've implemented a range slider within an Angular form to capture and display recorded values. <input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="objec ...

javascripthtmlangularformsinput

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

The color of the letters from the user textbox input changes every second

My task is to create a page where the user enters text into a textbox. When the user clicks the enter button, the text appears below the textbox and each letter changes color every second. I am struggling with referencing this jQuery function $(function() ...

javascripthtmljquery

Creating two horizontal flex containers with an input box that is responsive can be achieved by setting the display property

I need some assistance with a layout issue I am facing. Currently, I have two flex containers in a row - one set to flex-start and the other to flex-end. Both of these containers are within a wrapping div that is also set to flex. When the width of the wi ...

cssflexbox

The $.post method is malfunctioning

I am experiencing an issue where the onchange function is working properly, but the $.post function is not functioning as expected. Below is the HTML code snippet: <input type="checkbox" id="chk" value="3" onchange="checkradio(this.value)"/> Here ...

javascriptphphtmlajax

Arranging div elements in a vertical stack with CSS

Looking for help in arranging div elements in a way that they resemble an equalizer, similar to the one shown in this screenshot Equalizer. Can you provide advice on how to remove the dots from the list? I've already attempted using the CSS property ( ...

htmlcsslinear-gradients

Step by step guide on showcasing live server information obtained from the user-end through AJAX technique in a Javascript Pie Chart, within an ASP.NET html template

I have successfully managed to transfer data from the Client Side (C# Back End) to Server Side (JavaScript HTML in aspx) using AJAX. I need help figuring out how to display my own data dynamically in a JavaScript Pie Chart instead of hardcoding values. He ...

javascriptc#htmlasp.netajax

Sending JSON data to Python CGI script

I've successfully set up Apache2 and got Python running without any issues. However, I'm facing a problem with two pages - one is a Python Page and the other is an HTML page with JQuery. Could someone guide me on how to correctly make my ajax p ...

jquerypythonhtmlajax