Adding Search Icon to Nav Bar in Expound

  • Author
  • #2620056


    Hi All,

    Two questions. First, is there a way to add the search bar to the main menu in Expound using CSS?

    Second, how can I center the main menu text/icons between the top and bottom of the nav bar?

    The blog I need help with is



    Hi, we can move the search widget to the right end of the menu bar, but from looking at things, we could only keep it there down to a window viewport width of about 960px. Narrower than that and the menu and the search widget would collide.

    We could possibly make the search widget narrower, and tighten up the spacing in your menu, but probably at the most we would get down to 870px viewport width.

    Here would be the code for you to try. Paste it at the very bottom of your custom CSS.

    @media screen and (min-width: 961px) {
    #page {
        position: relative;
    #search-3 {
        position: absolute;
        top: 360px;
        right: 0;
    #search-3 .widget-title {
        display: none;



    Thanks for rescuing me once again, @thesacredpath. Works beautifully on the front page, but the bar doesn’t show up on other pages/posts. I played around with the code but can’t get it to show up.


    That is one of the limitations. The page template has to be set to default (with the sidebar) otherwise the sidebar and widgets don’t load at all, so it isn’t there to move.

    What you could do would be to set all pages to the default (with sidebar) and then use CSS to hide the sidebar and widen the content area. When you do it that way, the sidebar and widgets load with the page, but the browser doesn’t display them.

The topic ‘Adding Search Icon to Nav Bar in Expound’ is closed to new replies.