Horizontal navigation menu?

Permalink
I'm new to Concrete5 and to web design in general. Despite that, I designed my theme in Dreamweaver and managed to get it on Concrete5. My problem is that my navigation menu was designed to be horizontal and is coming up vertically. I understand that this is the auto-nav default, but, after reading everything I could find, I still don't understand how to change it.

Any help in simple language would be so appreciated!

my site: englishgardendesign.info

View Replies: View Best Answer
firepixel replied on at Permalink Reply
firepixel
You need to adjust the CSS styles in your template to change the order of the menu.

The menu is essentially an HTML unordered list <ul><li>...</li>...</ul>

The list items will fall vertically by default, unless you give them the 'float:left' property, which will cause them to align like text!

The exact tags depend on your template HTML. You may also want to add list-style:none to the CSS for the <ul> tag to remove the bullet points.
mtbattie replied on at Permalink Reply
Thanks so much for your quick reply. I tried to follow your suggestions but seem to have made matters worse.
Nav bar is now flush left and only "home" is in the proper color. Copyright area has gone vertical.

Here's the html and css:

Any help is SO appreciated. I'm tearing my hair out!!!!

<div id="navbar">
<?php
$navbar = new Area('Navbar');
$navbar->display($c);
?>
<ul>
<li><a href="#home"> </a></li>
<a href="#about"> </a><li>
<a href="#portfolio"> </a><li>
<a href="#services"> </a><li>
<a href="#contact"> </a><li>
</ul>

</div><!--end navbar-->


#ul
{list-style:none;
margin:0;
padding:0;
float:left;


}

#li
{list-style:none;
}

#a:link, a:visited
{
color:#b3d6bf;
display:block;
text-decoration:none;
padding:4px;;
font-size:20px;
text-align:center;
width:120px;
}
#a:hover, a:active
{

color:#38B184;
/*customize hover*/

}

#copyright{
width:500px;
clear:both;

margin:auto;
font-size:12px;
color: #b3d6bf;
height:15px;
mtbattie replied on at Permalink Reply
Thanks so much for your quick reply. I tried to follow your suggestions but seem to have made matters worse.
Nav bar is now flush left and only "home" is in the proper color. Copyright area has gone vertical.

Here's the html and css:

Any help is SO appreciated. I'm tearing my hair out!!!!

<div id="navbar">
<?php
$navbar = new Area('Navbar');
$navbar->display($c);
?>
<ul>
<li><a href="#home"> </a></li>
<a href="#about"> </a><li>
<a href="#portfolio"> </a><li>
<a href="#services"> </a><li>
<a href="#contact"> </a><li>
</ul>

</div><!--end navbar-->


#ul
{list-style:none;
margin:0;
padding:0;
float:left;


}

#li
{list-style:none;
}

#a:link, a:visited
{
color:#b3d6bf;
display:block;
text-decoration:none;
padding:4px;;
font-size:20px;
text-align:center;
width:120px;
}
#a:hover, a:active
{

color:#38B184;
/*customize hover*/

}

#copyright{
width:500px;
clear:both;

margin:auto;
font-size:12px;
color: #b3d6bf;
height:15px;
Steevb replied on at Permalink Reply
Steevb
Hi,

Try this:-

<div id="navbar">
    <? $a = new Area('Header Nav');$a->display($c);?>
    </div>


You must have one nav area as 'Header Nav' and don't put any of your links in.

Your CSS is a bit twisted, try this:-

#navbar ul{list-style:none;margin:0;padding:0;float:left;}
#navbar li {list-style:none;}
#navbar a:link, a:visited{color:#b3d6bf;display:block;text-decoration:none;padding:4px;font-size:20px;text-align:center;width:120px;}
#navbar a:hover, a:active{color:#38B184;}


hope this helps.
mtbattie replied on at Permalink Reply 1 Attachment
Thank you so much, once again.

Getting closer, but still not right. Everything is the right color, the copyright area reads horizontally as
it should (but should be at the bottom of the page) but the menu is still vertical.

I'm attaching a screenshot.

I'm not sure if I'm supposed to reply via email or on the forum, so I'll do both.

So grateful for the C5 help!!!
Steevb replied on at Permalink Reply
Steevb
Hi,

Your main navbar needs to be at the top of the page.

Put it between the logo div and content div or put it in content div as first item.
mtbattie replied on at Permalink Reply
Thank you again!

Is there a way to put it above the logo? Also, I'm just wondering why
it can't go at the bottom? It works fine at the bottom as a static html site. Trying to understand!
Steevb replied on at Permalink Reply
Steevb
Hi,

Try leaving body tag as body not an id.

There is a stray end tag in your code.

Nav is getting mixed in with copyright.

Also you might want to put in your nav.
#navbar ul { padding:0; margin:0;list-style: none; }


Try using a footer element and put your copyright in that.

Trying to help..
mtbattie replied on at Permalink Reply
55webdesign,

You are the best. I will try your new ideas and will let
you know how it goes.

Thank you so much for your time and your skill.

mtbattie (Jane)
mtbattie replied on at Permalink Reply 1 Attachment
I am making a lot of progress, thanks to you.

The copyright info is now in the footer element and the navbar has
gone horizontal at last. Please see the attached screenshot.

The next challenge is getting it centered. Any ideas? I've gone through
endless tutorials without success.
Steevb replied on at Permalink Reply
Steevb
Hi,

Glad your getting the hang of it.

Quick way is to add left padding to your ul until it is centered.

#navbar ul { padding:0 0 0 200px; margin:0;list-style: none;}
mtbattie replied on at Permalink Reply
Success!!!!!

Except for one thing: I'm know done with the About page, all is in place but the links on the nav bar aren't working. They work fine on the home page.

Any ideas?
Steevb replied on at Permalink Reply
Steevb
Hi,

First thing that springs to mind is the good old z-index!

if navbar is under content you wont be able to touch it.

But you don't need z-index, do you?

Two other points:

1. You shouldn't @import CSS files, not good for compliance.

2. Why have got so many empty 'p' tags in the content and at bottom of content?

I think your main issues are with your CSS file.

you mentioned Dreamweaver at the start of this post. Be careful how you use it, it's a great program can upset things.

I need more info on the CSS and layout before I help anymore.
mtbattie replied on at Permalink Reply 1 Attachment
Hi,

So confusing....the navbar has it's own div. No z-index that I know of. How to get those links linking?


I'm not sure what you mean about not importing css files. All I did was upload my css and default. php files (hand coded in Dreamweaver--I just use DW as a fancy text editor). Also, no <p> tags.

What I DID do when working on the About page was enter the content text while in edit mode. Then the photo above shifted to the left, so I went into Design mode in C5 and changed the padding there. I also fiddled with the alignment of the text. Did that screw things up? Maybe that's where all the <p> tags are? If so, now what?

What do I know? I am attaching the css and default.php files.

So thankful, yet again, for your help.

Hmmm. default.php wont attach, so I will copy and paste:

<body>

<div id="wrapper">

<div id="logo">
<?php
$logo = new Area('Logo');
$logo->display($c);
?>
</div> <!--end "logo"-->



<div id="content">

<?php
$content = new Area('Content');
$content->display($c);
?>
</div> <!--end content-->


<div id="navbar">
<?php
$a= new Area('Header Nav');
$a->display($c);
?>

</div><!--end navbar-->

</div><!--end wrapper-->

<?php
$this->inc('elements/footer.php');
?>
mtbattie replied on at Permalink Reply
Hi,

New development: the links are working fine on all other pages. Maybe I should just delete the About page and start over?

I do wonder about the css mess you were referring to, and await word.

Thanks!
Steevb replied on at Permalink Reply
Steevb
Hi,

Not sure that php looks right.

Yours:
<?php
     $content = new Area('Content');
     $content->display($c);
    ?>



Normally:
<?php 
   $a = new Area('Content');
   $a->display($c);
   ?>


I'll look at the CSS
Steevb replied on at Permalink Reply
Steevb
Hi,

You might want to wrap your navbar ul with an outer nav container and try top and bottom margins.

Plus there is no top or bottom margin on content or copyright, apart from al round auto. Perhaps 10px auto would be better.

Your CSS is a bit strange, you don't need two margin:auto or min-height. I also think your position attributes are wrong.

What I might do is try and reconstruct what you've done and put it right.

It might save us both a lot of time.

BTW: Forgot to say

Links do work on about page, but you have very gently roll over just beneath the buttons.
Steevb replied on at Permalink Reply
Steevb
Hi,

Use this:

Put a br in between end of content and start of navbar:
<br class="clear" />



Take spacer out the bottom navbar:
<div class="ccm-spacer">&nbsp;</div>


Maybe try wrapping your ul:

#navbar{margin:10px auto;padding:0;height:30px}


It worked for me.

Hope this helped
Steevb replied on at Permalink Reply 1 Attachment
Steevb
Hi,

Try this modified style sheet, see attached and let know how you get on.
mtbattie replied on at Permalink Reply
Hi,

I just uploaded the css file you sent. Many thanks but now the navbar
and copyright area do not display as they are underneath the content
slideshow. Mine seemed to be working better but DW seems to have permanently replaced my old one with the new. Back to the drawing board!
mtbattie replied on at Permalink Reply
Hi,

I take it back!!! Fiddled a little in C5 and now it looks great.
Not sure how the navbar ended up above the content area, but at
this point I could care less....

Thank you very much. Are you thinking gardens?
mtbattie replied on at Permalink Reply
Me again.

Just noticed that while the navbar is above the slideshow on the home page, it's below the content on the about page. What's with that?
Steevb replied on at Permalink Reply 1 Attachment
Steevb
Hi,

Try this modified theme.

it worked for me.
mtbattie replied on at Permalink Reply 2 Attachments
Thank you once again.

So far, 2 problems. The nav bar isn't centered on home page. On
the about page photo and text are missing & nav bar is vertical.

I'm attaching screenshots.
Steevb replied on at Permalink Reply
Steevb
Hi,

Found a couple of errors, one mine and one not?

<navbar> should be just <nav>



Your showing the div below inside your nav div (at the end) try taking that out.
<div class="ccm-spacer">nbsp;</div>
Steevb replied on at Permalink Reply
Steevb
You also need to push the padding over in the nav.

.nav{margin:10px auto;
padding:0 0 0 100px; (alter this to center links)
height:30px;}


It WILL work one day...
Pritam replied on at Permalink Reply
Pritam
Once you have got the nav bar in the center by changing the left padding to 208px, You should add the auto-nav to the Page Type defaults, for instance, suppose the theme template that the Homepage is using is default.php and if you intend to use the same layout for the other pages on your website, you need to check this video tutorial on how to add certain blocks to the default page types, so that whenever you create a new page, the blocks that you wish to see on all your pages like for example the auto-nav block, is always added to the new pages that you create.

http://vimeo.com/3023508

Some reading about understanding Page Types

http://www.concrete5.org/documentation/general-topics/page-types/...
mtbattie replied on at Permalink Reply
Thank you so much for your input. It is now working and I'm gradually getting the hang of web design and C5.
mtbattie replied on at Permalink Reply
It will work TODAY!!!!!

It's up and running. The portfolio page is slow to load but so what

One last question. I think (and hope) this is an easy one. How to I turn
my email address on the contact page into a link?
tallacman replied on at Permalink Reply
tallacman
In edit mode select your email address. Then click on the little chain icon in the rich text editor and it will ask you for a url. Type: mailto:[email protected]
Exit edit mode.
mtbattie replied on at Permalink Reply
Done! And is was so wonderfully easy. Thank you
Steevb replied on at Permalink Reply
Steevb
Hi,

Glad you got there in the end.

Email address, why use gmail when you have your own domain?

[email protected] sounds better and more professional. I'm always wary of gmail, yahoo or hotmail email addresses.

Anyway, put contact page in edit mode.

Select email text: 'email' 'email me' or in your case '[email protected] '

Click link icon looks like a chain link.

In pop up at top 'Link URL' type 'mailto:[email protected]'

Thats:- mailto:[email protected], do not forget the colon.

Portfolio IS slow. There is a reference to asmiller_gallery and amiant_gallery before gallerific. Take out all unnessesary code.

Good luck...

Note: Your files and server needs attention for speed increase. Files needs minimising and your server needs compression set up. But thats for another day...
mtbattie replied on at Permalink Reply
Thank you so much. You really have saved the day!

(I didn't realize I had a [email protected] address. It would sound much better, I agree)

Yes, file and server management are for another day. I need to recover from this phase!

How can I thank you? I'm so appreciative.
Steevb replied on at Permalink Reply
Steevb
Hi,

Just noticed another flaw!!

My HTML5 code got mixed with your code.

Default php should look like this:

<!doctype html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/jegd.css">
<!--[if lt IE ]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?Loader::element('header_required'); ?>
</head>
<body>
 <div id="wrapper">
<div id="logo">
      <h1>ENGLISH GARDEN DESIGN</h1></div> <!--end "logo"-->
<div id="content">
        <div id="image">
mtbattie replied on at Permalink Reply
I'm so afraid to touch anything now that it's working. But I will try to get up the courage.

What is this:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>


Should that be included or removed? Confused!
Steevb replied on at Permalink Reply
Steevb
Hi,
I work with HTML5, your code is not.

You need to change:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> 
 <html lang="en"><head>


To:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>



You can take out:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


and take out the loose end tag 'article':

<!-- end .content --></article>
mtbattie replied on at Permalink Reply
Got it and will tackle the job tomorrow!
mtbattie replied on at Permalink Reply
"Portfolio IS slow. There is a reference to asmiller_gallery and amiant_gallery before gallerific. Take out all unnessesary code."


Forgive my ignorance, YET AGAIN, but I can find the above when I view
the source code online, but there is no reference to the other galleries in my files. How do I go about removing them?

Thanks!
Steevb replied on at Permalink Best Answer Reply
Steevb
Ok,
Not sure how you did it?

I tried replicating the errors, but couldn't get them.

Have you tried clearing the cashe in dashboard/settings/Speed Settings?

I did however find that with only nine opimised images with gallerific the page load was between 9 and 12 seconds, no good?

We'll have to talk to the developer about that one.

You still need to modify your default php template?

Sorry I couldn't help
mtbattie replied on at Permalink Reply
I love the way the Post Reply box obscures the original message. Just sayin'. Hear that, C5?

At any rate, I cleared the cache in sitewide settings. The portfolio page seems to be loading a little faster, but not as fast as it should be. I optimized all the photos in Photoshop, but maybe I should go back and make the files even smaller?

Not sure what you mean about the errors. I experimented with 2 other slideshows before I settled on Gallerific. There's no trace of them at my end, but when viewing the source code in Firefox I could see references to the previous two. So, I wasn't sure how to get rid of them as you can't edit within Firefox and I don't know where else to look.
Steevb replied on at Permalink Reply
Steevb
Hi,

I checked your images, the weights are fine.

But you do have duplicates of four images according to speed test.

77f609b65a27216dc2ea0f72d295e62f.jpg
5842d0c2401883f9bc2a461997cb9de8.jpg

a332acabbc0c413e0114656e855c87c2.jpg
97c141ba2bcd58ec786bfb69cb9beb7d.jpg

45a33c57ee77ad11bf2cf9ec7d8ea256.jpg
7d8b47264fcacf74b865e8945a7aa73c.jpg


2bfe0b43d3dfb5ab6cecc25604e84207.jpg
77206f6bd711737fbaff8bbe64d82a07.jpg

Removing might help a touch.

Good Luck...