Navigation Bar text colour

Hi- is it possible to change the navigation bar colour ? I've been trying but not discovered how to. I started with the white template.
Thankx, Kay.

Kay:
It's not a normal user controlled item. It's generated by javascript and somewhere in iWeb's themes packages there's a .js file that you can edit to make some changes. It's not for the faint of heart.
However, you can make your on text based navbar and have any font (web safe), color, roll over color, etc. like in this demo page.
OT

Similar Messages

How do you change the color of the navigation bar text in iWeb?

I have created buttons to set in the nav bar but the type color needs to be white to show up against the button background.
How can I change the nav bar text colors?
Thanks
G

If it's the iWeb generated navbar then see if this tutorial helps: #24 - How to Change the Basic, Rollover and Visited Color of an iWeb Navbar
OT

How do I change navigation bar text color?

I want to change the color of the type in the navigation bar, as well as the line/bar below the type. How can I do this?

there are many way to change navbar look-and-feel:
1) by changing template XML, this requires XML knowledge and is a complex process.
2) by changing navbar CSS in page source, this a bit easier but requires post editing.
http://discussions.apple.com/thread.jspa?messageID=5186688&#5186688
3) by javascript, this requires CSS and javascript knowledge:
http://discussions.apple.com/thread.jspa?messageID=8638743&#8638743
4) by manually build your own navbar as roddy and ot mentioned, this requires no knowledge of any kind but it is not very efficient; see my post here:
http://discussions.apple.com/thread.jspa?messageID=8136472&#8136472
5) by AJAX, this requires CSS, javascript and AJAX knowledge; I outlined it in my blog here:
http://www.cyclosaurus.com/Home/CyclosaurusBlog/Entries/2009/9/10iWeb_NavBarWidget.html

Changing a Navigation Bar

So I've chose the 'Main Stage' template (I think that's what it's called) and I'm customising it myself. I want to change the colour of the navigation bar and get rid of the footer at the bottom. To get rid of the footer I've just reduced the footer size, is that the best thing to do? And I can cant find a way of changing the navigation bar's colour????
Help!
Cheers

Regarding the footer the only way to get rid of it is to set it to zero in the Inspector/Page/Layout pane.
As for the links color, that's all controlled by javascript and not readily doable. Cyclosaurus has posted various javascript bits to use in HTML snippets to modify the links. The only color script I've found of his is to change the rollover color. You can read about it near the middle of this demo page: Misc. Items.
You can have much more control over the navbar by creating your own Text Based Navbar. Deactivate the built in navbar and create a text box with the links in the font (Web Safe Font only). The downside is that you will have to copy an past the text box on each page the first time an any time you add or remove a page.
OT

Navigation bar not visible in edit mode

Hi,
is there somebody who can help me out of this: in edit mode my navigation bar is not visible, however once the site is uploaded the bar is visible. During edit mode i can only see a big dot which positioned in the navigation bar text box.
I am using the latest version of iweb and OS 10.6.8
looking forward to any good sugestions. Thanks.

That is so unusual. Usually it's the other way around: looks OK in iWeb but not after publication.
Log into another user account on your Mac, launch iWeb, create an new test site and see if the navbar is visible. If it isn't then the application seems to be the culprit and a reinstall of iWeb seems warranted. To do so you'll have to delete the current application and all files with "iWeb" in the file name with either a .PKG or .BOM extension that reside in the HD/Library/Receipts folder and from the /var/db/receipts/ folder,
Click to view full size
Then install iWeb from the disk it came on originally and apply all necesary updaters.

Navigation bar doesn't work after publishing to .Mac

I composed my website in iWeb '08 on a PowerBook G4 but when I publish it to iMac or to another server, I only get the home page visible with the navigation bar text. However, I am unable to use the navigation bar to go to any of the other pages created. This happens when I publish to a folder as well.
Help?!

Hi dr.dara and welcome to the iweb discussion forum,
we often see this problem on the forum and the only answer we can give is that you might have something in front of the nav bar. Something like a textbox or a shape.
Sometimes emptying the Cache of the browser helps resolving this kind of problems.
What happens if you click on the nav bar in iWeb itself?
If you can't find anything could you provide us your link?
Regards,
Cédric

Cant see the page links text in my main & side navigation bars

Hi
I published my site to Mme yesterday and I have noticed a few problems have come up. The main problem is my main and side navigation bars. In the top nav bar you cant see all the page links text, they should show up in white. I can only see them when you roll over the page name (this is in grey) and that is the rollover colour. Not sure what to do to get the text colour to stay white all the time so it is always seen once it's been clicked. It just disappears, but is still there if you roll over it
My side nav bar, the text should also all be white and when you roll over it turns red. For some reason when you click on the page link it turns grey and stays grey. I also want the page links to stay white once clicked on
www.bareessentials-waxingformen.co.uk
Please check out my site, you would understand my situation better. I know there are other issues I have to sort out on my site which I am dealing with but this problem with the nav bars have stumped me
Thanks

I didn't notice anything unusual with any of your links. Their color is set with this file:
http://www.bareessentials-waxingformen.co.uk/Site/WELCOME_files/WELCOME.css

A few questions about my navigation bar, centering, getting rid of margins and changing colours via

I am having a few problems with my navigation bar, could be quite simple fixes but I haven't managed to find an answer yet that works. I am wanting to get rid of the white margins at the top of my page and just below the nav bar and centre the text on the page. I want to get rid of the gradient and turn the background white, black text and a light grey hover background. I have a link here
http://vps3147.inmotionhosting.com/~hannahro/home.html
I tried adding aligning the text in nav and I tried changing float left to center. but this only listed my nav bar contents under each other centered. I tried to change the background colour in nav ul from #efefef to #ffffff. However this made no difference either
Here is the navigation css
@charset "UTF-8";
/* CSS Document */
nav {
          margin: 0 auto;
          width: 100%;
          text-align: center;
nav ul ul {
          display: none;
          nav ul li:hover > ul {
                    display: block;
nav ul {
          width: 100%;
          max-width: 1064px;
          background: #efefef;
          background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
          background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
          background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
          box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
          padding: 0px 60px 0px 60px;
          /*border-radius: 10px;*/
          list-style: none;
          position: relative;
          display: inline-table;
          nav ul:after {
                    content: ""; clear: both; display: block;
          nav ul li {
                    float: left;
                    nav ul li:hover {
                              background: #4b545f;
                              background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                              background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                              background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
                              nav ul li:hover a {
                                        color: #fff;
                    nav ul li a {
          display: block;
          padding: 20px 20px;
          color: #757575;
          text-decoration: none;
          nav ul ul {
                    width: auto;
                    background: #5f6975; border-radius: 0px; padding: 0;
                    position: absolute; top: 100%;
                    nav ul ul li {
                              float: none;
                              border-top: 1px solid #6b727c;
                              border-bottom: 1px solid #575f6a; position: relative;
                              nav ul ul li a {
                                        padding: 15px 40px;
                                        color: #fff;
                                        nav ul ul li a:hover {
                                                  background: #4b545f;
          nav ul ul ul {
                    position: absolute; left: 100%; top:0;

I'm wanting to change the background colour of the nav bar to white, without a gradient,
Change this:
nav ul {
    width: 100%;
    max-width: 1064px;
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px 60px 0px 60px;
    /*border-radius: 10px;*/
    list-style: none;
    position: relative;
    display: inline-table;
To this:
width: 100%;
    max-width: 1064px;
    background: #FFF;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px 60px 0px 60px;
    /*border-radius: 10px;*/
    list-style: none;
    position: relative;
    display: inline-table;
And add this:
nav li a {
     width:5em; /**ADJUST TOP MENU WIDTH TO FIT**/
     text-align:left;
Nancy O.

How to disable placeholder text in the URL and search fields of the navigation bar?

Everytime I open a new tab (frequently, home page is set to blank) I have to look at "Go to a Website" in the navigation bar. The search field shows the name of the currently active search engine until text is inputed. All I want is to be able to do is disable the placeholder text, showing both fields as blank.

Thank you. Worked fine. For anyone who comes across this in the future, change "graytext" to "transparent" to hide the placeholder all the time. As is above, the placeholder shows when the mouse points at the box.

Text missing from the navigation bar

hi, i'm really hoping someone can help, as apple tech, say they don't support iweb. i have just started using iweb 09, so i have created a new site and chosen a template, but i have not text displaying in the navigation bar, i can turn it off and on, but not text, if i publish this page to a folder and view it with safari i can see the work welcome in the navigation bar, also in i place a google map wigdit, i can resize it, move, but cant edit, in respect of i have no box to input a post code or address... i have just tried this on my other mac a imac, but brought at xmas and both updated to lasted version of software, and i get the same results...
can anyone advise me...
thanks in advance

What's the URL of your site so we can view the problem first hand?
OT

Invisible text in navigation bar

When I type something in the navigation bar, I get a list of related pages that I have visited before. The problem is that in Nightly 18, I can see the pages' icons but not the text. All I get is a gray rectangle. If I use the keyboard or the mouse to select one of the invisible results, I got directed correctly to the page. This happens both in Arch linux and in Ubuntu 12.04

That usually indicates a problem with the font that is used and isn't working or missing.
Try to use the DOM Inspector to see which font is used in that section.
*DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
* https://developer.mozilla.org/En/DOM_Inspector
* https://developer.mozilla.org/en/Introduction_to_DOM_Inspector
The DOM Inspector (DOMi) has a menu item (Search > Select Element By Click) and a button to "Find a node to inspect by clicking on it" (left icon on the toolbar).
* open the browser window in the DOMi (File > Inspect <b>Chrome</b> Document) and choose the first from the list.
* click the "Find a node to inspect by clicking on it" button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window other than the title bar).
* click that element with the mouse and keep the button pressed until you see a red border to indicate the the DOMi has located that element in the DOM tree.
You need to use the keyboard to get access to the location bar of the Firefox window (Ctrl+L) and type something or press the Down key to open the drop down list.<br />
Once the list is open then you can click an entry and you should see the red focus ring.
Then you can check in the right pane in the DOM Inspector which font is used:
* click the icon with the drop marker in the header and choose "Used Font Faces"

Display text in navigation bar when user is logged in

Hi all,
I'm (still ) on Apex 4.2.6.
Currently, I have in my page templates, the following snippet:
      <div class="logoBar">
          <img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />
          <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>
        <div class="userBlock">
          <span>Username: &APP_USER.</span>
          #NAVIGATION_BAR#
        </div>
      </div>
I have the requirement to display both the username (APP_USER) and the company the user works for (Application item AI_COMPANY), only when the user is logged in. When the user isn't logged in; instead of those items, I have to show a login link. Well, I know how to only show a link to the login page, when the user isn't authenticated, using the navigation bar. Currently, when a user isn't authenticated; the page shows: Username: nobody. That's because it is in my page template. How can I only show the username when the user is logged in? And show the company name only then?
My first thought was to add an item in the navigation bar. But those items shows up as links. Is there a way to add a navigation bar item, and let it display as text? Sure, I could write a dynamic action on page 0 to remove the link, but I'm searching for a nicer/better sollution.
I apreciate your help!

Hi tomvdduin,
you can show company name which is already in your Application item(AI_COMPANY) by modifying the page template mentioned above.
<div class="logoBar">
<img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />
    <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>
<div class="userBlock">
    <span>Username: &APP_USER.(&AI_COMPANY.)</span>
    #NAVIGATION_BAR#
</div>
</div>
I have included company inside ( ), you can change how you want to show.
for example
<span>Username: &APP_USER.</span><span>Company: &APP_COMPANY.</span>
Hope this helps you,
Regards,
Jitendra

Altering text on 'template' navigation bars

Is there any way in iWeb 9 to alter the text - font, color, size - in the template navigation bars. I remember it wasn't possible in earlier versions.
I know I can create my own navigation bar, but then there is no automatic process when building the separate pages (other than hand copying the navigation bar from page to page).
All ears,
Ben

It can be done, but it means altering javascript code - how are you at doing that?
Do a search of the site and there have been lots of questions relating to how to alter the page template nav bars over the past month - lots should come up and just have a look at the code that has been posted.
You either do this or build your own text based nav bar. I know it is a little more fiddly but does not really take that long - I build my own all the time for both my sites and I don't find it time consuming - you can always just build one page and duplicate to save time.

Justify Hyperlink Text in Navigation Bar

Hello,
I am trying to justify the text of my navigation bar (which are all hyperlinks). I would like to use css. I have tried a variety of things but none seem to work. I have attached the text. If anyone could write the code I need it would be greatly appreciated! Thanks! I have attached the file as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shupaca Handmade Alpaca Clothing</title>
<link href="Shupaca.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('Images/Home Page Links/scarf.jpg')">
<div class="MarginControl">
<div id="NavigationBar">
    <a href="index.html" target="_self">Home </a><a href="scarves.html" target="_self">products </a><a href="construction.html" target="_self">who we are </a> <a href="construction.html" target="_self">why alpaca? </a><a href="construction.html" target="_self">FAQ's </a><a href="mailto:[email protected]">contact</a><a href="construction.html" target="_self"></a></p>
</div>
</div>
</body>
</html>

As you will see though, by making the menu text so large, the interval between menu items looks all off. Eithr dramatically red
uce the text size, or you can set the width of each individual li by giving some an id and specifying width:
<div id="NavigationBar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li id="prod"><a href="scarves.html">products</a></li>
    <li id="who"><a href="construction.html">who we are</a></li>
    <li id="why"><a href="construction.html">why alpaca</a></li>
    <li><a href="construction.html">FAQ's</a></li>
    <li><a href="construction.html">contact</a></li>
</ul>
</div>
wtih this css - the changes in orange
#NavigationBar a {
    color: #666;
    font-family: Arial verdana sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
#NavigationBar a:hover, #NavigationBar a:active, #NavigationBar a:focus {
    color: #84cbe1;
#NavigationBar ul {
    list-style: none;
    width: 850px;
#NavigationBar li {
    text-align: center;
    padding: 0px;
    float: left;
    width: 118px;
#NavigationBar li#who, #NavigationBar li#why {
    width: 180px;
#NavigationBar li#prod {
    width: 136px;
Hope that helps.
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Centering Navigation Bar Images and Text

I'm using a Navigation Bar entry of
#TEXT#<img src="#IMAGE_PREFIX##IMAGE#" title="#ALT#" alt="#ALT#" style="display:block" />#TEXT#
which is similar to the way the APEX Page Definition navigation bar is designed. The images do appear directly above the text but the text is right justified. How do you get the text to be centered, as it appears in the APEX Page Definition?

I used the theme 10 and there is a thread where I explained the solution I found:
Navigation Bar Image
and here is the result:
http://htmldb.oracle.com/pls/otn/f?p=31517
Denes Kubicek

Navigation Bar text colour

Similar Messages

Maybe you are looking for