Cannot modify nav bar

**esm** · 12-07-2020, 04:19 PM

Hi Guys,
I have downloaded and installed the indent style sheet below:

Code:

<style type="text/css">

.indentmenu{
font: bold 15px Verdana;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(navbar/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(navbar/indentbg2.gif) center center repeat-x;
}

</style>

and I have some questions.

1. I cannot modify the font. No matter which font I enter, the font on the nav bar is always Times Roman.
2. When I center the nav bar, the height of it goes down significantly.
Can someone help here?
Thanks,
Ed

**coothead** · 12-07-2020, 09:58 PM

Hi there esm,

perhaps these modifications, may help you on your way...

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>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

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

.indentmenu {
    text-align: center;
 }

.indentmenu ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 1px solid #f0f; /*  #564c66 dark purple border */
    background: #000 url(navbar/indentbg.gif) center center repeat-x;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

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

.indentmenu ul li a {
    display: block;
    padding: 0.32em 0.69em;
    border-right: 1px solid #f0f; /* #564c66 dark purple divider between menu items */
    font: bold 1em Verdana sans-serif;
    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/indentbg2.gif) center center repeat-x;
    color: #f0f; /*text color of selected and active item*/
 }
    
</style>

</head>
<body>

 <div class="indentmenu">
  <ul>
   <li>
   	<a href="#">link one</a>
   </li><li>
   	<a href="#">link two</a>
   </li><li>
   	<a href="#">link three</a>
   </li><li>
   	<a href="#">link four</a>
   </li>
  </ul>
 </div>

</body>
</html>

coothead

**esm** · 12-07-2020, 10:21 PM

Thanks for the quick response.
The nav bar centers nicely but the font is still Times Roman.

**coothead** · 12-07-2020, 10:54 PM

Hi there esm,

there is nothing in the code I gave you that
would display it as Times New Roman.

Can you post a link to your site that displays
it as that font?

coothead

**esm** · 12-08-2020, 01:38 AM

Coothead,
I know that there is nothing in your code re Times New Roman.
The website is not finished yet, in fact I have just started. But I have attached a screen shot how the nav bar looks.
Thanks again,
Ed

**coothead** · 12-08-2020, 11:58 AM

Hi there esm,

without seeing the complete HTML and CSS that you
are using it is difficult to see the cause of your problem.

You have not said whether the "Times New Roman"
is effecting the whole page or just the a elements in
the menu.

One possible cause could be something like this in your
CSS code...

Code:


* {
    font-family:'times new roman'!important;
 }

...which would effect the whole page, or this...

Code:


a {
    font-family:'times new roman'!important;
 }

...which would only effect a elements

coothead

**esm** · 12-08-2020, 04:51 PM

What I submitted in my original post IS the complete css, except that the verdana was arial.
I downloaded it from this website, assuming it was a correct working code.
The times roman font does not affect the entire website, just the nav bar.

**coothead** · 12-08-2020, 05:03 PM

Hi there esm,

unless I can replicate your problem, I can see
no possible way that I can help you.

Put your page on line so that I may see it.

coothead

**esm** · 12-08-2020, 05:21 PM

OK, thanks a lot for all your help.
Ed

**esm** · 12-08-2020, 08:52 PM

Coothead,
I've finally figured it out. I have modified this (took the sans serif out):
.indentmenu ul li a {
display: block;
padding: 0.32em 0.69em;
border-right: 2px solid #FFFFFF; /* white divider between menu items */
font: 1.25em Verdana;
text-decoration: none;
color: #fff; /*text color*/
}

Thanks again for helping me out.
Cheers,
Ed