Cannot modify nav bar

Printable View

Show 40 post(s) from this thread on one page

12-07-2020, 04:19 PM
esm

Cannot modify nav bar

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
12-07-2020, 09:58 PM
coothead

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>  <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
12-07-2020, 10:21 PM
esm

Thanks for the quick response.
The nav bar centers nicely but the font is still Times Roman.
12-07-2020, 10:54 PM
coothead

Hi there esm,

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

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

coothead
12-08-2020, 01:38 AM
esm

1 Attachment(s)

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
12-08-2020, 11:58 AM
coothead

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
12-08-2020, 04:51 PM
esm

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.
12-08-2020, 05:03 PM
coothead

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
12-08-2020, 05:21 PM
esm

OK, thanks a lot for all your help.
Ed
12-08-2020, 08:52 PM
esm

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

Show 40 post(s) from this thread on one page