this should mainly be a css issue right?

no bullets: ul {list-style: none; }
horizontal: li { float: left; } or li { display: inline; } or li { display: inline-block; }

hard to give you instructions without knowing more specifics.

Hi, thanks for replying :-)

Yes Im sure it will be, but i have no idea where to set the css for this. I have used one of the nav bars supplied by concrete called 'breadcrumbs'. I have attached two screenshots, one is of how the nav bar looks at the moment, and one of where I'm trying to get it to. I dont have much experince in creating nav bars!


Thanks for taking the time to help.

the breadcrumb template is used for displaying the path from top down to where you are. such as: Home > Products > Books > Some fantastic book.

you should be fine with choosing the default view i.e. no template selection. from there you can customize the design with CSS.

in your autonav settings, choose pages at the top level, no children/sub-pages.

then in your css file that you reference to in your theme, add styles such as


if you have problems referencing your css file, more info is needed. what theme do you use? does it use any css or does the page look like it's straight from the 90's? etc.

Hi,

Im using a custom theme. I see know what the breadcrumbs nav is for, this is not really what I should be using then as I have it as my main navigation. I will try adding in that css code and get back to you. thanks :-)

Hi there,

I tried adding this but coundnt get it to work. at present I have selected - autonav - custom template - header menu. I have then set autonav as you mentioned with only top pages and no sub / children. But this is still vertical and I can only see it displaying 'home' and none of the other pages atm.

I have attached screen shots of my css because im sure the error will be mine!

what does your site structure (sitemap) look like?

it should be
Home
About Us
Services
...

That should make all pages appear in the autonav with top-level and and no children selected. you can always verify with the Preview tab in the autonav block settings.

when you get that to work, inspect the navigation with firebug or chrome's inspection tool to see what css rules are applied. specifically check the <li> elements and see if any styles are applied.

verify that the class name .nav exists on the <ul> element as well.

it's only a matter of making your css stick to your nav ul/li elements. when they do, you'll be on your way and can add more css to the previously mentioned rules to add padding/background/fonts etc.

Hi again,

Sitemap looks correct, and the preview of autonav is correct (other than its vertical instead of horizontal)

On my page because the nav is going vertical, its going behind another block, and thats why I cant see the list of pages but they are all there so thats a start.

With regards to css, I dont have any ul or li specificationas set, I added in the ones you posted above, but nothing happened. Would this go under the #nav section of my css?

I inspected the element like you said and it had added in th ul as nav-header, so i changed the code you posted to nav-header instead of nav and it has put them horizontal which is fab progress after two days of trying!!

Now I just need to work out how to space them out as they are all in one row and set the styling. Do you know any sites that help with setting the style of ul and li elements? As I have never done a nav bar of my own before so no idea where to go next.

Thanks for all your help

great! try googling css navigation and see what comes up. but in general it's pretty straight forward.

no bullets: ul.nav-header { list-style: none; }
horizontal: .nav-header li { float left; }
padding for each link: .nav-header li a { padding: 10px 20px }
spacing in between link (if you want empty non-link space between the links): .nav-header li a { margin: 0 10px; }
height: .nav-header li a { line-height: 24px; }

the height will be the line-height plus the padding you specified above. if you want a specific height and not a height depending on font-size, change the rules to this
.nav-header li a { display: block; height: 30px; padding: 0 20px; }

One more thing, sorry!

When I have inspected the element, its showing elements and styling I haven't set - I'm guessing this must be default settings of concretes header menu (I have attached a screenshot)

Where would I go to change this styling? As none of this is set in my css sheet I created for the theme?

try clicking on the autonav block and choose Design and see if these rules are defined on one of the tabs there. there's an option to clear the settings used.

I have been adding in the some of the code you have just posted re paddings etc and it has worked. I have just added this to my own css, and it seems to be overidding the css i posted a minute ago. Is this safe to do or should I be looking for where that default code is and changing that?

I'm so sorry for all the questions!

I had been playing with styling in there so that will properly be where it is coming from. Thank you so much for all your help.

yeah that makes sense. i've never seen css styles defined in the design mode from out-of-the-box c5 webparts before so it's probably your stuff.

but yes, usually overrides are fine. the most specific rules will be the ones that are used. body .nav-header li wins over .nav-header li etc. you can also add !important after each rule (but before the ;) to make sure that rule is used but this approach is considered dirty as it triggers an ugly spiral of overrides.

Thank you. I have come across the !important overide before, but tend not to use it if I can help it as it ends up getting me confused.

My nav bar is looking almost exactly as I would like it at the moment just from what you have posted and from google. There are still a couple of things I am struggling with though -

1. Is it possible to use a font thats not in the usual lists?
2. How do you get padding from the bottom? (the menu is sitting right on the bottom of the nav div atm)

and
3. is it possible to add something that styles the link for the active page? I have styled all my link a:active etc, but when you finish clicking the styling goes away, is there a way to make it stay for each active page?

I can open a new discussion for this if you like, you have helped loads already. But any help is appreciated. Learned alot this morning!

1. yes. you can use webfonts for instance. if you have the font files on your computer you can upload them to your site and use the webfont approach to use them. you could also use existing webfonts from places such as google. search for google webfonts and you'll get instructions on how to use different fonts.

2. easiest is to use margin in this case on the nav element. try adding {margin-bottom} to your <nav> element. you might also have to add { overflow: hidden;} to your <ul> because the <li>'s inside are floating elements (float:left;} which makes the container (the <ul>) not understand the full size of its contents. overflow:hidden forces the browser to calculate this and things like margins etc work as expected.

3. yes. if you inspect the page that you've selected from before you'll notice it has two classes, nav-path-selected and nav-selected. the former indicates that the page you're viewing is within the path of the that link item. the latter indicates that the page you're viewing is the same as the link.