WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make header and nav menu side by side? (9 posts)

  1. kristen.ncl
    Member
    Posted 2 years ago #

    Hi, I am trying to get my header and nav menu side by side. Any tips? My Page.
    I want it to be formatted like this: example - as in their menu "Log in" - "About Us".
    Thanks for your help!

  2. vtxyzzy
    Member
    Posted 2 years ago #

    Try adding these lines to the end of style.css:

    #branding { height: 80px; }
    #site-title, #site-description {
       margin: 0;
       width: 325px;
       position: relative;
       top: -100px;
    }
  3. kristen.ncl
    Member
    Posted 2 years ago #

    Thank you so much! I still have tweaking to do, but this worked perfectly.
    Do you know how I can change the background of the menu to transparent and place the search bar to the right of the nav menu?

  4. vtxyzzy
    Member
    Posted 2 years ago #

    This requires a number of lines of CSS code, and I am not sure that I got all of them correct, so you may need to make adjustments.

    #branding { height: 50px; }
    #branding hgroup { margin: 0 15px; }
    #branding #searchform { top: 1em; }
    #access {
       float: left;
       width: 50%;
       margin: 0 0 0 270px;
       background; none;
       box-shadow: none;
       -webkit-box-shadow: none;
    }
    #access li a { color: #000000; }
  5. kristen.ncl
    Member
    Posted 2 years ago #

    Excellent, thank you so much!

  6. theobsidian
    Member
    Posted 2 years ago #

    Hi, I tried your code and it works very well, thank you!
    However, now I have my nava menu aligned to the center of the header, while I'd like it aligned to the bottom... any suggestions?
    Thank you very much!

  7. vtxyzzy
    Member
    Posted 2 years ago #

    If you mean at the bottom of the content, above the footer, chances are that this cannot be done with CSS alone. And, the code would be different for each theme.

    Please start a new thread for this topic and post a link to your site.

  8. theobsidian
    Member
    Posted 2 years ago #

    No, I don't mean to the bottom of the content, just to the bottom of the logo: the menu is now aligned to the center of the logo, while I'd like it to be aligned to the bottom of the logo (and of course the background should adapt to it).
    The website is not online yet, but you can see a screenshot here.

  9. deborahbabin
    Member
    Posted 2 years ago #

    I have a slightly different goal: to add a drop shadow on the header.
    I use YOKO theme. The header is nice a large but flat.

Topic Closed

This topic has been closed to new replies.

About this Topic