Community Forums › Forums › Archived Forums › Design Tips and Tricks › Customizing header to look like StudioPress one
- This topic has 8 replies, 3 voices, and was last updated 9 years, 12 months ago by Pavle.
-
AuthorPosts
-
April 26, 2014 at 12:34 pm #102487PavleMember
Hi guys,
I hope someone could help me out.
At the moment I completely messed up my header. Its too big, and just not right.The type of header I would like to have is the one StudioPress has.
How can I make my header like that with two nav menus, social icons and logo in the nav menu?Any tip would be appreciate and would help me develop my site and make it more user friendly.
Enjoy your weekend guys!
http://bit.ly/1fzRUDMApril 27, 2014 at 6:58 am #102563PavleMemberStill looking for a solution on this problem of mine.
Thanks.April 27, 2014 at 10:19 am #102599nunotmpMemberThe easiest way to do this would be to remove the menu from the menu areas and instead add a custom menu widget to the header widget. Then you can use some css to get the look your are going for.
April 28, 2014 at 5:44 am #102702PavleMemberThanks a lot. I only have right header widget.
Here is what I have so far ,but still don´t know how to add logo in the menu instead of the header.
http://bit.ly/1fzRUDM
I followed this tutorial
http://wpsites.net/web-design/add-header-image-logo-to-genesis-2-0-sample-theme/If anyone can point me out to some tutorial or just give me an idea, I would be thankful.
Have a great day!
April 28, 2014 at 8:39 am #102720Lauren @ OnceCoupledMemberI don't fully understand why you want your logo in your nav menu. You want your menu in your header area, next to your logo, as it is now. You can use CSS to change the appearance of this area, and can add a second widget area with your social icons.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 28, 2014 at 8:45 am #102721PavleMemberHi Lauren, thanks for the tip.
Well I want my menu to look like http://www.studiopress.com/
Right now I am sure you would agree my menu does not look appealing, its oversized, and I am completely clueless how to modify it to make it look like StudioPress one.
Here is a photo of their menu, and header, I am not sure if I got elements right, but my does not look right.. I
Thanks guys.
April 28, 2014 at 9:09 am #102727nunotmpMemberI do not have the time to walk you through a complete tutorial I can get you on the right track.
1. Re-position your nav menu by placing this in your functions.php
remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_before_header', 'genesis_do_nav' );
This will place your menu on the top of your header.
2. Change your CSS
This will align the links to right and change the background color.nav-primary { background-color: #000; text-align: right; }
From there you can continue to refine the look of the header area with simple css. If you would like the social icons in the top then that is a whole other issue.
With the snippets above you I got your site to look like this.
http://awesomescreenshot.com/0a42q130a5
April 28, 2014 at 9:24 am #102731Lauren @ OnceCoupledMemberOK, here's how I would approach this:
- Add a new widget area to the very top of my page. Here's one tutorial: http://wpsites.net/web-design/widget-genesis/
- Put a custom menu widget in there, as well as your social media icons. You'll need to do some CSS styling, which will require further research.
- Re-style your header area and menu using CSS again, but essentially leave them as they are set up already.
- Remove the secondary menu from displaying. You don't need that.
Mostly you need a lot of CSS changes to achieve this. If you're not familiar with CSS, I'd look into hiring someone to make these changes for you as they probably aren't worth your trouble, and they're too complex to give you all the code via the forums.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 29, 2014 at 4:11 am #102872PavleMemberThanks guys, very interesting methods, I´ll try out both of them.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.