Create an individual Sub-Navigation Design

[Christian-wa]

Hey Genesis Community,

now, it's time again for another adjustment to my website.

I want to add the Sub-Navigation to my web-project in an elegant and stylish way. This means, I want to be individual. What kind of Sub-Navigation really strikes me is the one from Apple. Their Sub-Navigation ist not just elegant, but also user-friendly and easy to use.

So. How can I achieve the same result for my site?

First of all, those are the things I want the Sub-Navigation to have:

- it should stick to the top edge of the Monitor aka. of the browser-window as you scroll down. Normally nor the primary neither the Sub-navigation would go with as you scroll down, but I want exactly that! I don't want the Primary-navigation + the sub-navigation to go with, I want only the Sub-Navigation to with you (staying at the top) as you scroll down. And when you are back up again, it should be Positioned right under the Primary-navigation as it was before.

- the first element of the Sub-Navigation should be in the <h2>..</h2> tag. And Positioned at the left. And this first element should link to the current page. Let's say one of your subpages is domain/chocolate/ and you create a bunch of content for this Topic Chocolate. The first element of the Sub-Navigation should link to this page (domain/chocolate/) and all the other Elements within the Sub-Navigation link to the specific Content within the Topic. For Example
domain/chocolate/how-to-taste-it/
domain/chocolate/where-to-buy/
....
* you get the point.

- All the other Elements which point to further Content should be positioned at the right.

- full-width, Responsive,

- Currently I use a Plugin called "Genesis Simple Menus" and it gives me the Flexibility to add a Sub-Navigation to those Pages where it would make sense. I don't want the Sub-Navigation to appear on every page. So I include the Sub-Navigation only on those pages where I need it. Having said that, I want the (main) Content-Area direct underneath the Primary-navigation, when I don't have a Sub-Navigation on this particular page. But If include a Sub-Navigation on a page (or pages) I want it to be Positioned between primary-navigation and content area.

Resources:
Those are the sites, which inspire me and made me want to create such a Sub-Navigation:

http://www.apple.com/itunes/
http://themes.pagelines.com/iblogpro/?dobar=1

Genesis Simple Menus

Again, I appreciate your support on this. I wish you an awesome Day and much success. I know you are a creative community and sure, you can give me tips on how to realize my wish.

PS: Of course, I am using the Genesis Framework. And the Genesis Sample Theme.

Warm wishes
Christian

---

Life is there to enjoy, everything I tackle therefore reflects that.

http://www.oppars.com

[Brad Dalton]

Try using your browser to inspect the CSS code used to style the sub menus you linked to.

You can use Chrome inspector, Firebug or Macs > Develop > Web Inspector.

You can also look at the CSS in any child themes style sheet for the sub menu and modify/add to it.

I would also check out the copyright policy as far as design goes as some sites don't allow reproducing of design elements so be aware of that also,

---

Tutorials for StudioPress Themes.

[Christian-wa]

Hey @braddalton,

thx for your answer on this.
Of course you are right, that one has to be aware of "not reproducing" anyone else's style. What I wanted to say was, that those Examples were Inspirations for me and that I use those Inspirations and ideas to create my own style. But thank you for making that clear.

PS: Topic has been solved btw.

Chris

---

Life is there to enjoy, everything I tackle therefore reflects that.

[Author]

Posts