Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
  • #13973

    I’ve just been running into things left and right, haha. What I want right now should be simple, I think, but I can’t make heads or tails of the header.php where I think the solution lies.

    I’d like the menu to be situated next to the logo, rather than below it. That should save a good fraction of an inch of screen space. For demonstration, I mocked up how I’m hoping it will look:

    View post on

    And now that I look at it, I could even skip out on the “Home” link entirely. the logo would serve perfectly. Can anyone please suggest a solution?


    … Posting here is like calling the IT guy; you can’t figure it out untill you call him, but as soon as you do the problem clears up. Here’s my solution:

    I put this into custom.css

    .main_menu {
    top: -47px;
    left: 190px;

    Adjust those values to put it nicely next to the logo.

    All that’s left now is to figure out how to adjust the header height to make it all look good.


    Hey Wyko,

    Glad you were able to figure it out :)

    To adjust the header, you’ll probably need to add a height: to #header .container_wrap and adjust some of the other elements within the header. I know the #header .container has a min height of 160 so that will need to be changed or removed at the very least.

    Good luck and let us know if you have any issues.




    The header height is actually turning into something on a problem. The various solutions I’ve seen to reduce the container height of the header make a white bar appear above the slider and below the header, exactly as big as the space I’ve shortened the header. Annoying…


    You are not the only one who has had problems with header heght and logo/menu placement. It would be killer to have some easy-to-use parameters in the backend.


    Devin; I tried what you posted, and not much happened. Only a rnadom blue line appeared right at the height I want the header to be shortened to. I made a screenshot of the layout.css and the page:



    Please remove the changes made on your header then try this snippets.

    div .logo {
    padding: 0px;

    .main_menu {
    top: 55px;
    left: 15px;





    That didn’t work very well, I’m afraid. The padding at the top of the logo is fine, and as you can see from the previous screenshots I’ve figured out how to move the menu to where it needs to be. The problem is the space underneath the logo, which needs to be about as much as the space above it.

    Here’s what happened after adding your code:

    Thanks for your contribution though! I hope we can work this out eventually.


    To recap for everyone: I need the header height to be about 140px without breaking the theme. Anyone?


    Hi Wyko,

    Try to add this code:

    #menu_container {
    height: 140px !important;

    if that doesn’t work, try to use this one instead:

    #menu_container {
    height: 140px !important;
    min-height: 140px !important;

    Hope this helps. :)




    Hey Ismael! Thanks for your reply; it’s the best solution yet, since it’s gotten the best looking results.. However, there are still a few issues with the layout.

    For reference:

    I had to use the Min-distance version to get it to shrink properly. After using it:

    – The slideshow grew something like 25 pixels higher than the image inside of it

    – The “Support Hotline” is placed in the middle of other content in the mobile layout

    – The breadcrumb bar grew much too large and off-center.

    Thanks for your work!


    Hi Wyko,

    For the slideshow and breadcrumb, try to use this code:

    #top #slideshow_big, #main {
    top: -38px !important;

    Just adjust the top value.

    For the Support hotline, use this code:

    .small_header_info {
    right: 250px !important;

    Just adjust the right value. Increasing the value pushes the Support hotline to the left.

    Hope this would help you. :)




    Wow, that looks like it completely fixed the normal width version the the site! I love what that looks like :)

    The mobile version, though, is still wrong. The code you gave for the support hotline pushed it out of the way, but not where it needed to go. Also, the breadcrumbs in the mobile version still have a gap space.

    View post on



    Ismael: Your advice has been great so far, and I really appreciate your help.

    How about this to maybe make it simpler: Can we just make the mobile version’s layout the way it is in the original, without the modifications that the wide version gets? Maybe that would fix this.


    Hmmm… also, there’s a white bar at the very bottom of the pages now. To be honest I don’t really care about it much, but if you have a quick idea about it, that would be nice.


    Hi Wyko,

    Kindly open wp-content/themes/choices/css/layout.css, and find this line of code:

    @media only screen and (max-width: 767px) {

    paste this code below it:

    #top #slideshow_big, #main {
    top: -80px !important;

    .responsive .header_meta .small_header_info {
    top: -220px !important;
    text-align: right !important;
    font-size: 9px !important;

    Hope this fixes the mobile issues. :)




    Almost! check out and squeeze the page really tight. The phone number overlaps the logo. I think changing the width of the number so that it line wraps beside the logo would fix it, but changing the width just move is to the left.

    Also… That white bar at the bottom is a bit more annoying than I thought it would be. Is there anything we can do about it?


    Hi Wyko,

    As of now, I am not sure on how to get rid of it. :(




    Aye. Well, think on it if you can. I’ll post back here in a week or two in the hope you’ll have any new ideas. In the meantime, I’ll poke around as well.


    Hi Wyko,

    Thanks, I’ll be sure to post here if I can find a solution to it.



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

The topic ‘Putting the Menu beside my logo (not below it, as default)’ is closed to new replies.