Customizing header to look like StudioPress one

Community Forums Forums Design Tips and Tricks Customizing header to look like StudioPress one

This topic is: not resolved

This topic contains 8 replies, has 3 voices, and was last updated by  Pavle 3 months, 3 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #102487

    Pavle
    Member
    Post count: 110

    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/1fzRUDM
    #102563

    Pavle
    Member
    Post count: 110

    Still looking for a solution on this problem of mine.
    Thanks.

    #102599

    nunotmp
    Participant
    Post count: 164

    The 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.


    #102702

    Pavle
    Member
    Post count: 110

    Thanks 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!

    #102720

    Lauren @ OnceCoupled
    Member
    Post count: 589

    I 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


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102721

    Pavle
    Member
    Post count: 110

    Hi 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
    image

    Thanks guys.

    • This reply was modified 3 months, 3 weeks ago by  Pavle.
    • This reply was modified 3 months, 3 weeks ago by  Pavle.
    #102727

    nunotmp
    Participant
    Post count: 164

    I 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


    • This reply was modified 3 months, 3 weeks ago by  nunotmp.
    • This reply was modified 3 months, 3 weeks ago by  nunotmp.
    #102731

    Lauren @ OnceCoupled
    Member
    Post count: 589

    OK, here’s how I would approach this:

    1. Add a new widget area to the very top of my page. Here’s one tutorial: http://wpsites.net/web-design/widget-genesis/
    2. 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.
    3. Re-style your header area and menu using CSS again, but essentially leave them as they are set up already.
    4. 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


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #102872

    Pavle
    Member
    Post count: 110

    Thanks guys, very interesting methods, I´ll try out both of them.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.