Buy me a coffee

Float Navigation items in 4 corners

Suppose you have 4 items on Navigation: About, Services, Pricing, Contact.

You want to float these items in 4 corners:

  • About: top left
  • Services: top right
  • Pricing: bottom left
  • Contact: bottom right

You can use this code to Custom CSS box

nav>div.header-nav-item {
    position: fixed !important;
    z-index: 9999;
}
div.header-nav {
    display: block !important;
}
nav>div.header-nav-item:nth-child(1) {
    left: 2vw;
    top: 4vw;
}
nav>div.header-nav-item:nth-child(2) {
    right: 2vw;
    top: 4vw;
}
nav>div.header-nav-item:nth-child(3) {
    bottom: 3vw;
    left: 2vw;
}
nav>div.header-nav-item:nth-child(4) {
    bottom: 3vw;
    right: 2vw;
}

Note:

  • Left: space between text – left of screen
  • Right: space between text – right of screen
  • Top: space between text – top of screen
  • Bottom: space between text – bottom of the screen

Result

Float Navigation Items In 4 Corners Min