Aligning my site menu with the logo and search bar.

  • Unknown's avatar
    cwasurveyors · Member ·

    Hello,

    As the title suggests I’m hoping to find out whether it is possible to resize and align my site menu with the company logo and search bar at the top of the page.

    Does anyone know if it is achievable?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    otpidusprime · Member ·

    Hello @cwasurveyors,
    You cannot customize the menu to align’s with the logo and the search bar, with a free account – because the theme is constructed to have that look.

    But, if you upgrade to a WordPress.com Premium or WordPress.com Business account, then you will have access to the CSS editor using which you can achieve the look you desire.

    Read more about Editing CSS it here:
    https://en.support.wordpress.com/custom-design/editing-css/

    More info on paid WordPress.com plans here:
    https://wordpress.com/pricing/
    __________________

    Once you upgrade your account, you can use these CSS codes to align the menu with the logo and the search bar:
    1. First we reduce the width of the menu bar so that it fits between the full the logo and the search option. And then we pull it to the top. Here’s the CSS code: 

    #site-navigation {
    max-width: 900px;
    width: 100%;
    position: relative;
    margin-top: -134px;
    padding-left: 80px;
}

    To fix some overlapping issues(when the window is resized), use this CSS: 

    @media screen and (max-width: 1210px) {
  #site-navigation {
      max-width: 500px;
  }
}

    I would recommend you to reduce the amount of the texts inside the menus because, when we reduce the width of the entire menu bar, the height of the menu bar increases and it looks goofy.

    2. Finally, we use relative positioning to force the search bar fit between the logo and search option, and then pull the search bar to the top. Here’s the CSS code: 

    #search-container {
    position: relative;
    margin-top: 22px;
}

    If you are not sure about the working of this CSS code, then here’s the preview:
    http://prnt.sc/etna6a

    You can also apply these codes to your site using the developer tools in chrome/firefox/opera or any major browser. Press F12 and just copy and paste these codes inside the Styles tab of the developer tools.

    NOTE: The changes you make using the developer tools are temporary because it is applied only on the client-side(your browser) and not on the actual files on the server. So they will be gone once you refresh the page.

    Hope this helps :)

  • The topic ‘Aligning my site menu with the logo and search bar.’ is closed to new replies.