Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Navigation Styling

Featured Replies

Hello to all - I hope everyone's creative juices are flowing nicely.

 

My current project has a navigation bar that I'm just not happy with at all.

http://www.hjssolutions.com/sites/orchard.

 

How do you ladies and gents come up with good, eye-pleasing and functional navigation elements?

 

I've installed a copy of SiteXpert7 (from the cover disc from this months .net magazine), but the code it generates includes tables which I'd like to avoid for compliancy.

 

Any tips would be welcomed.

 

TIA.

Hello to all - I hope everyone's creative juices are flowing nicely.

 

My current project has a navigation bar that I'm just not happy with at all.

http://www.hjssolutions.com/sites/orchard.

 

How do you ladies and gents come up with good, eye-pleasing and functional navigation elements?

 

I've installed a copy of SiteXpert7 (from the cover disc from this months .net magazine), but the code it generates includes tables which I'd like to avoid for compliancy.

 

Any tips would be welcomed.

 

TIA.

 

I would stick to what you have been doing already , an unordered list with CSS styling .. tables a big no,no !! the nav you have at present aint half bad , nice,clean simple rollovers .. you want to change the 'normal' text colour though to something a little brighter. I could say use 'graphic' web buttons with all sorts of flashy styling to them , but i really do not think this site needs it ... keep it clean and simple !

 

ps. you could maybe heighten that green bar that sits behind the navigation then place the buttons so they sit inside it (no overlap)...just a thought.

  • Author
I would stick to what you have been doing already , an unordered list with CSS styling .. tables a big no,no !! the nav you have at present aint half bad , nice,clean simple rollovers .. you want to change the 'normal' text colour though to something a little brighter. I could say use 'graphic' web buttons with all sorts of flashy styling to them , but i really do not think this site needs it ... keep it clean and simple !

 

ps. you could maybe heighten that green bar that sits behind the navigation then place the buttons so they sit inside it (no overlap)...just a thought.

Hi Slim,

 

Thanks for that. I'll take your comments on-board and have a go at changing it tonight when I get home.

 

Thanks again.

Any tips would be welcomed.

The inactive links on the nav bar are too dark IMO, also I think you've overcomplicated this part of the site - it looks a bit out of place. What about something more simple, maybe just change the background colour in the hover state? Or maybe it's just because the background is not the same height as the buttons - this might make all the difference.

  • Author
The inactive links on the nav bar are too dark IMO, also I think you've overcomplicated this part of the site - it looks a bit out of place. What about something more simple, maybe just change the background colour in the hover state? Or maybe it's just because the background is not the same height as the buttons - this might make all the difference.

 

Hello again people,

 

I've been doing some more work on my latest project and I'd like some comments please on the newsletter page:-

 

http://www.hjssolutions.com/Sites/Orchard/News.htm

 

This is a work in progress. I realise that the navbar background does not extend all the way across the page in IE6 and it doesn't validate but would appreciate any feedback.

 

Thanks in advance.

That's looking great Lee, well done!

 

My only comment is the main content which seems a bit squashed, I'd suggest making the spacing equal on all sides.

I think, I would either make the header less deep, or make the nav bar slightly deeper

 

Also i feel it would look better if you took away the top and bottom border on the nav bar so it is just green to white

 

try that and see what it looks like

  • Author
That's looking great Lee, well done!

 

My only comment is the main content which seems a bit squashed, I'd suggest making the spacing equal on all sides.

 

Thanks for that Bluedreamer. I totally agree with you. I'll see what I can do about that.

Thanks again.

  • Author
I think, I would either make the header less deep, or make the nav bar slightly deeper

 

Also i feel it would look better if you took away the top and bottom border on the nav bar so it is just green to white

 

try that and see what it looks like

 

When you say to make the header less deep, do you mean that it comes too far down the page (please excuse my ignorance)?? If that's the case, then yes, I tend to agree - it does take up all the room on a 800 x 600 res.

 

I've taken the border off of the nav bar and it does look better, thanks for that. I'll post it up again later on. I'm tinkering with it today.

 

Thanks for your advice, it's really appreciated.

LeeSalter

 

Yes I feel the header is very deep (takes up a lot of room) But if thats the way you client likes i then so be it.

 

Let us know when you have uploaded the revised site

I just checked your site out and think the nav bar wlooks great now compared to your first post and I agree with that the header is a bit to big.

  • Author
I just checked your site out and think the nav bar wlooks great now compared to your first post and I agree with that the header is a bit to big.

 

Thomas,

Thanks for that.

 

I've settled on the navigation styling now. The rollover is now a brown colour rather than dark green. The brown reflects the tree trunk colour that's in the logo and, I hope, helps to keep the theme going throughout the site. There is a problem with it in IE6 in that the nav bar doesn't extend across the full width of the page, but I'll get to that tonight. Also, the rollover for the Contact link doesn't fill to the right hand edge in any browser, but I'm sure that I'll figure it out.

 

All in all I'm quite pleased with it so far:- it's my first real attempt and it the first bit of paid freelance work that i've undertaken.

 

Thanks again.

  • Author
LeeSalter

 

Yes I feel the header is very deep (takes up a lot of room) But if thats the way you client likes i then so be it.

 

Let us know when you have uploaded the revised site

 

Hi trwb.

 

I tend to agree, I've shortened the header slightly now to 250px in height. It's uploaded now.

Thanks for your interest and advice.

I was just wondering why the navbar bar must be in two rows.. I mean, http://www.hjssolutions.com/Sites/Orchard/News.htm

Why don't you line up "contact us" link with all the other links. Would be much more better.

And on suggestion more: Get rid of the drop shadow effect from "Orchard News" text.

  • Author
I was just wondering why the navbar bar must be in two rows.. I mean, http://www.hjssolutions.com/Sites/Orchard/News.htm

Why don't you line up "contact us" link with all the other links. Would be much more better.

And on suggestion more: Get rid of the drop shadow effect from "Orchard News" text.

 

Xhop, My mistake, I meant to take that page off, the correct page for that link is http://www.hjssolutions.com/sites/orchard/news1.htm.

 

I quite like the shadow on the Orchard News text, but am williing to be swayed by public opinion on it. :D

Well, actually it would be better if you just reduced it.

Maybe: Distance 0, opacity 25-50%

We'll see if it went worse or better then :)

  • Author

OK people,

 

I've got the the referrals page done for my vets project.

http://www.hjssolutions.com/Sites/Orchard/Referrals.htm.

 

Can I please have some feedback on it and the site in general...I'm still waiting for the majority of the content from the client, but I'm quite happy with the structure of it. This is kinda my first real attempt at a site for a paying client.

 

TIA.

 

:)

  • Jo 90 locked this topic
Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.