Executive Pro: header and nav bar issues

Community Forums Forums Design Tips and Tricks Executive Pro: header and nav bar issues

This topic is: not resolved

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

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

    cybersavvy
    Member
    Post count: 21

    Hi

    Two problems, possibly related

    1) The logo is showing at 260 x100 and I want it larger. Plus I would like to put a phone number and social media icons in the right hand side of the header but the only option I can find for editing that area (I am not a coder!) is in the Header Right widget which is the only place I can find to put the primary navigation.

    2) However, I would like the primary navigation and secondary navigation to be together in the centre of the page rather than one left aligned and one right aligned. Then, if at all possible, to round the corners of the nav bar but right now this seems the least of my problems!! (Example site: http://anotherturnusedbooks.com/)

    Thanks

    http://www.expressworld.co.uk/wordpress
    #75168

    nutsandbolts
    Moderator
    Post count: 3140

    If you select Primary Navigation for that menu instead of putting it in the header right widget area, it should display on top of the secondary navigation (under the header). Just check the box under Appearance > Menus for primary navigation like you did for the secondary.

    I just put Executive Pro on a test site, set a primary and secondary nav with some random text in the header right area, and it looks like this:

    Hope that helps!


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75179

    cybersavvy
    Member
    Post count: 21

    Doh! It really was that simple?!! Thank you!

    Is there any way of centreing them as it all seems a bit unbalanced now?

    Cheers

    #75180

    nutsandbolts
    Moderator
    Post count: 3140

    Don’t feel bad – a fresh pair of eyes will find something you’ve spent hours on in a matter of seconds, every single time. It’s rule #1 of working on websites. :)

    To center the menus, find this:

    .genesis-nav-menu {
    background-color: #f2f2f2;
    clear: both;
    color: #666;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    }

    and change to this:

    .genesis-nav-menu {
    background-color: #f2f2f2;
    clear: both;
    color: #666;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    text-align: center;
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #75189

    cybersavvy
    Member
    Post count: 21

    Ah, simple!

    If I want to round off the corners (as per link I put in OP), can I change padding in that code or is it not that easy?!

    Thanks for this, I can feel a huge weight lifting off my shoulders :)

    #79777

    ATUB
    Participant
    Post count: 12

    Hi! I saw your link to my site and thought I’d tell you how the corners are rounded.

    In defining the containers and such for each of the entities you’d like to round:

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;

    to round the top of the top navigation bar.

    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

    to round the bottom of the bottom navigation bar.

    To round one navigation bar:

    border-radius: 10px;


    #79779

    ATUB
    Participant
    Post count: 12

    Oops!

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

    to round the bottom of a nav bar.

    Couldn’t see how to edit my post above.


    #79788

    cybersavvy
    Member
    Post count: 21

    @ATUB

    Thank you so much for replying personally.

    I’ll give these rounded nav bars a go now.
    :)

    #91415

    cybersavvy
    Member
    Post count: 21

    Ok, I have tried and tried to change the corners and sorry, but I need to ask for help again.

    I am looking within my css on FTP, within the section entitled Site Navigation, but I cannot work out where exactly to put the code for rounding the corners. I’ve tried firebug on the ATUB site but that is proving as clear as mud to this newbie!

    Can anyone give me any clues please as to where to put the code ATUB has been kind enough to give me?

    Thanks

    Oh, and I have also failed to make the top and bottom of the nav bar different colours so currently rounded corners will not show up anyway!

    • This reply was modified 8 months ago by  cybersavvy.
    • This reply was modified 8 months ago by  cybersavvy.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.