Navigation Bar

Hi there,
I am looking to change my navigational bar, i am currecntly using the executive theme. I would like a horizontal bar like on this website www.webelectricals.co.uk
Is there any way of doing this.
many thanks
toby

[pinbrook]

Yep, just locate the layout that creates the horizontal nav bar and replace it with your own code for a tabbed menu.

there are a lot of sites that have free online css builders that will help

alistapart is one..

[los_design]

Hi Toby

is that an Actinic driven store on asp?

[eshopbrokers]

Navigation Bar

Hi, I dont think its actinic, do you know the code for a tabbed navigational bar?
Many Thanks
Toby

[pinbrook]

do you know the code for a tabbed navigational bar

as I said in my previous reply there are plenty of sites you can go to to build a tabbed nav bar, you can then copy and paste the generated code into actinic.

[Finn]

horizontal nav bar

I have (i think) located the horizontal nav bar layout in the library and tried pasting in the code for a tabbed layout but to no effect. Have i put the code in the wrong place.

I am using the css buttons and tried putting the code in
design library | navigation bars | horizontal nav bar text links


Any ideas where i'm going wrong

Thanks

[cdicken]

Hi Gavin

Are you looking to customise the Executive theme or a differnet theme. If it is the 'Executive' theme, then the Navigation Bar layouts are not used for the horizontal navigation bar layouts in that case.

You need to add you code directly into the outer layouts used by the Executive theme. You can find these in line 103 (or thereabouts) of the layout called 'Works Best With Executive'. All those pink things between <p class="text_menu" align="left"> and </p> are the default navigation buttons. Try adding your code in there.

[Finn]

Navigation bar

Thanks chris - i know that i can change the images by creating my own buttons and editing line 103 but what if i want to add this free code

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


#ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}


#ddcolortabs a:hover{
background-color: #8cb85c;
}

#ddcolortabs a:hover span{
background-color: #8cb85c;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #8cb85c;
}

#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

Do i need to go to the stylesheet ??

Thanks
Gavin

[cdicken]

Gavin

Try adding these styles at the bottom of the 'Actinic Stylesheet' layout (you'll find this at the top of the 'Web Page Outer Layout' group in the library) and they will then be available to your store design. You won't need to include the <style> or </style> tags.

Bear in mind that all the code surrounding where you are placing your custom buttons may have height/width restrictions - this could affect the appearance of your custom code.