Apple-like Top Navigation in Genesis Child Theme

[Christian-wa]

Hey Community!

I am so excited, as this is my very first post in this forum and about Genesis as well. Yeah ,)
Pls forgive me if I bollix some Theme related terms....

So. What is my post about?
I want to style the top-navigation on my site.

My hero in this case is the top-navigation from http://www.apple.com as it is the most compelling (in my eyes) and I would be very pleased if I could create such a style on my site.
What I like about this version is,

• that it goes full-width
• is centered
• flat
• and looks like it is a bit transparent.

Before I forget to mention what Theme I use - I better mention it.

I use:
Wordpress (latest version)
Genesis Framework (proud to own)
Genesis Sample Theme

I must admit, I am not a coder or programmer, but I love cool and clean design, so I am passionate to learn new Twists. I mean it can't hurt to know why you do what you do, am I right?
Am I right, that the only file we'll probably have to use is the styles.css? I mean, actually nothing has to be edit in the functions.php, right? Actually we 'only' change the look not the behavior, at least this is my thought. What I need is Code which goes well with Genesis and at the same time gives me the apple-like look for the top-navigation.

Well, that's it for now (I guess). I really love your support on this and I am looking forward to your answers. Maybe this thread also help others in their site-design efforts, you never know.

Kind regards
Christian

---

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

http://www.oppars.com

[Christoph]

Hi Christian,

wonderful to see your enthusiasm 🙂

Genesis works a lot with hooks and filters, so even if you think something would be done only via css, the easier way is to add, delete or change a bit of code in the functions.php before you start with changing the css.

This is the case here.

Add this to the functions.php to reposition the primary menu to the top of the page:

//* Reposition the primary navigation menu
remove_action('genesis_after_header', 'genesis_do_nav');
add_action('genesis_before_header', 'genesis_do_nav');

In the style.css around line 1038 you will find the settings to change the appearance of the primary nav.

.nav-primary {
	background-color: #666;
}

will change the background color to the apple color.

Take a look at that and then let´s see what else you want to change.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Badlywired]

The background on apple is transparent it is styled as such

background: #444;
  background: rgba(0,0,0,0.6);

The second line rgba has 4 parameter, the being the opacity. The #444 is just fallback for browser that can cope with rgba.

However you will need to create an overlap between your slider & nav background to get the transparency effect.

---

My techy blog WordPress and stuff badlywired.com

[Christian-wa]

Hey @Christoph and @Badlywired,

THANK you so much for your support! 😉

Awesome, how it starts to look the way I Imagined it to be. I included the Code into the functions.php

//* Reposition the primary navigation menu
remove_action('genesis_after_header', 'genesis_do_nav');
add_action('genesis_before_header', 'genesis_do_nav');

And in the styles.css the code for the primary Navigation looks like this:

.nav-primary {
	background: #444;
  	background: rgba(0,0,0,0.6);
	text-align: center;
}

Now, I want one more thing. 😉 The navigational Links are already in the right position, but the Logo not yet.
Correct me if I am mistaken, but there is no such thing as a hook for the logo, but a hook for the Site Title:

genesis_site_title

Well, I come up with this idea, cause in the Genesis Settings you can choose between dynamic Text and Logo Image. So it makes sense to think, that if I want to put the logo image into the primary-navigation at the first (left) position by repositioning the genesis_site_title, right?

Let me try to understand the php Code. This time I want to reposition the logo and put it into a specific position within the Primary navigation.

Code for the functions.php

//* Reposition the Genesis Site Title aka Logo
remove_action('genesis_site_title');
add_action('genesis_site_title', 'genesis_do_nav');

There I might get a little bit confused. I have .site-title and .header-image .site-title in the styles.css. Would I have to adjust both queries or (as I think about it) only the .header-image .site-title value?

Again, I deeply appreciate your support on this!
PS: I already learned so far, that in most cases I do not directly change the css, but have to have a look into the functions.php first.

Christian

---

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

[Badlywired]

I'd probably just hard code the logo into the first nav element based on this

Add Nav Extras

e.g.

<?php
//* Do NOT include the opening php tag

add_filter( 'wp_nav_menu_items', 'theme_logo_menu_extras', 10, 2 );

function theme_logo_menu_extras( $menu, $args ) {

	//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
	if ( 'primary' !== $args->theme_location )
		return $menu;

      // add a list item containing an image to front of menu, style with css
	$menu.= '<li class="logo"><img src="---change to path to image---" ></li>' . $menu;

	return $menu;
}

Or similar

---

My techy blog WordPress and stuff badlywired.com

[Christian-wa]

This reply has been marked as private.

[Author]

Posts