Member Avatar for davy_yg

Hello,

I am trying to style the admin navigation:

How to create such navigation admin style? The box is seperated for each item. So far I only know how to create a one-long-bar navigation style.

Please help. Thanks in advance.

  • 4 Contributors
  • 3 Replies
  • 127 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Nmalik1

Dani AI

Generated

The screenshot shows a row of discrete, boxy nav items rather than one continuous bar. suggested inline-block and provided a float/padding sample; both are valid. A clearer, more maintainable approach for the same visual result is to use Flexbox (or Grid) so spacing, alignment and responsive wrapping are handled by the layout engine instead of float hacks.

A compact Flexbox pattern (full-clickable boxes, consistent spacing, keyboard focus) looks like this:

<nav class="admin-nav" aria-label="Admin">
  <ul>
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Users</a></li>
    <li><a href="#">Settings</a></li>
  </ul>
</nav>
.admin-nav ul {
  display: flex;
  gap: 12px;           /* creates the visible separation between boxes */
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
}

.admin-nav a {
  display: block;      /* makes the whole box clickable */
  padding: 10px 18px;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: #222;
}

.admin-nav a:focus {
  outline: 3px solid #268bd2;
  outline-offset: 2px;
}

For equal-width boxes use li { flex: 1; }. If older-IE support is required, replace gap with horizontal margins on the items (and remove margin on the last child). For reference on compatibility and details, see the Flexbox guide and gap docs on MDN: Flexbox basics and gap property. Also prefer semantic <nav> (see MDN nav element) and visible focus styles for accessibility.

Recommended Answers

All 3 Replies

Member Avatar for paulkd

If you apply a style of display:inline-block, set the width and add a margin-right or margin-left to the hyperlink tags this should do it.

Edited by paulkd because: plural for tag
Member Avatar for JorgeM

There's a few ways to create that "gap". You can also apply padding on the <li> elements. For example..notice padding-right: 10px on the ul#nav li selector below.

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
ul#nav {
list-style:none;
position:relative
}

ul#nav li {
display:inline;
float:left;
position:relative;
padding-right: 10px;
}

ul#nav a {
text-decoration:none;
padding:10px 0px;
width:100px;
background:#ff0000;
color:#ffffff;
float:left;
text-align:center;
border:1px solid #ababab;
}

ul#nav a:hover {
background:#ababab;
color:#ff0000;
}
</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
</body>
</html>

7f47dd2f33d1a083a5733816ed0bd723

Member Avatar for Nmalik1

Jorge has show a simple coding try it you will make it, if you face any proble let us know. Daniweb community will help you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.