Changing the position of Primary Menu and adding a Search box

  • Unknown's avatar
    sandya2013 · Member ·

    There is a blank space below the Primary Menu section. Is it possible to bring down Primary Menu section and add a Search box above it and also increase the font size of Primary Menu?

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

  • senff · Staff ·

    Hi there,

    The following code should take care of that:

    @media screen and (min-width: 993px) {
     #masthead .main-header-links {
          position: relative;
     }

     #masthead .main-header-links nav {
          margin-top: 25px;
     }

     #masthead #site-navigation li {
          font-size:12px;
     }

     #masthead #site-navigation li li {
          font-size:11px;
     }

     #masthead .main-header-links .header-search-container {
          top: 0;
          right: 0;
          position: absolute;
     }
}

    Two notes:
    – the font size can not be increased more than this, or else the menu will take up too much room on screen sizes around 1000 pixels wide.
    – because the menu is now placed under the search icon, and therefore placed more to the right, the first item of the submenu under “About us” will be cut off on screens around that size. See: http://prntscr.com/fea2pu

    Hope this helps!

  • Unknown's avatar
    sandya2013 · Member ·

    Thanks for the help. This is working but I want to add a Search Box(Rectangle Search Box) not Search Symbol. Is it possible?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, on the search form, see what you think with this. 

    @media screen and (min-width: 768px) {
#masthead .main-navigation {
    margin-right: -45px
}
#masthead .header-searchform {
    display: block !important;
    top: 0 !important;
}
#masthead #header-search-button {
    display: none !important;
}
#masthead .header-search-container {
    border: none !important;
}
}

@media screen and (max-width: 991px) {
#masthead .header-searchform {
    top: 20px !important;
}
}
  • Unknown's avatar
    thesacredpath · Member ·

    I forgot to say that on screens 768px and narrower, the design returns to the original since we start to run out of space to have the search open all the time.

  • Unknown's avatar
    sandya2013 · Member ·

    I want to change the pattern of the search bar and also want to keep it responsive. How do I do it?
    Screenshot: https://cloudup.com/cwzB9pyoo5S

  • Unknown's avatar
    sandya2013 · Member ·

    And also after scrolling down the size of the logo is getting too smaller.

  • Unknown's avatar
    sandya2013 · Member ·

    One more thing I wanted to ask. After scrolling down the page instead of increasing the size of the logo I would like to keep it in the same size and remove the search bar. The search bar should not appear only when page is scrolled down. Only the logo and menu should appear when page is scrolled down.

  • staff-loquaciousloon · Staff ·

    Hi @sandya2013!

    After your related support chat on some of these questions, we sent an email reply as you requested :)

    Having this thread going in chat, email, and forums could get a little tricky with too many people all looking at the same code, so I’m going to close this forum thread – if you have any questions, feel free to reply to the support email :)

  • The topic ‘Changing the position of Primary Menu and adding a Search box’ is closed to new replies.