Align menu and search link

[Andrew Prior]

Playing with Responsive Web Design I have the following page.
https://onemansweb.org/lectionary.html

As you can see the Search link under the banner lines up with the Menu on a desktop. But when the page displays on a small screen; eg phone, the Search link does not line up with the menu links. Is it possible to pad / margin etc this link in such a way that it will line up?


CSS from original CMS installation:

Code: Select all

.menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
     }
  
.menu_horiz a {
   padding: .3em 1em .3em 1.0em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #1EAEDB;
   display: block; /* IE has problems with this, fixed above */
    }

Template Code:

Code: Select all

<div class="row">
      <div class="twelve columns" style="margin-top: 1%">
        
{global_content name='skeletonrandomheaders'}{anchor anchor='top'}
        <div class="menu_horiz">
             {menu template='simple_navigation.tpl' number_of_levels='1'}{anchor anchor='search' text='Search'}
        </div> 

         
      </div>
</div>

Andrew
CMSMS™ 1.12 “Pohnpei”

[Andrew Prior]

A sort of fix;

Code: Select all

display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;

keeps the Search item aligned with the others. Because it is not part of the "{menu}" though, it stays at the end of the first line. Andrew

[Dr.CSS]

Most responsive sites have a different menu style when on phones/tablets and the search is not usually inline with the menu...

2 different menu styles...
http://staceyjaswad.com/
http://demosthatrock.com

[Andrew Prior]

Thank you for that.