Cannot modify nav bar

**esm** · 12-10-2020, 10:40 PM

I have attached an enlarged pic of one of the tabs.
Left of the "M" at the left end of the tab there is a gap that shows on all tabs when hovering, except the most-left "Home" tab.

**coothead** · 12-10-2020, 11:18 PM

Hi there esm.

let's use CSS flex instead...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    font: normal 1em / 1.62em sans-serif;
 }

.indentmenu {
    display: flex;
    justify-content: center;
 }

.indentmenu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #38571A; /* dark green border */
    background: #000 url(navbar/indentgreen.gif) center center repeat-x;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

.indentmenu ul li a {
    display: block;
    padding: 0.32em 0.69em; 
    border-right: 2px solid #fff;/* white divider between menu items */
    font: 1.25em Verdana;
    text-decoration: none;
    color: #fff; /*text color*/
 }

.indentmenu ul li:last-of-type a {
    border-right: 0;
 }

.indentmenu ul li a:visited {
    color: #fff;
 }

.indentmenu ul li a:hover,
.indentmenu ul li a:active, 
.indentmenu ul li .current {
    padding-top: 0.36em; /*shift text down 1px for selected and active item*/
    padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/
    background: #000 url(navbar/indentgreen2.gif) center center repeat-x;
    color: #fff; /*text color of selected and active item*/
 }
</style>

</head>
<body>

 <div class="indentmenu">
  <ul>
   <li><a href="index.html" class="current">About Us</a></li>
   <li><a href="meeting.htm">Meeting Dates & Topics</a></li>
   <li><a href="members.htm">Members-Only Info</a></li>
   <li><a href="garden.htm">Garden</a></li>
  </ul>
 </div>

</body>
</html>

coothead

**esm** · 12-11-2020, 08:56 PM

Works like a charm, thanks again.
Cheers,
Ed

**coothead** · 12-11-2020, 09:15 PM

Hi there esm,

by changing display: inline-block to display:flex it removed
the 3px right and bottom margins that inline elements have.

coothead

**esm** · 12-12-2020, 04:26 PM

OK.
My CSS knowledge doesn't go that far.

Thread: Cannot modify nav bar

Thread Tools

Search Thread

Similar Threads

how to modify featuredcontentslider?

Help to modify Up Counter

Modify setcookie

Modify Script.

Need To Modify

Bookmarks

Bookmarks

Posting Permissions