MyBB Community Forums

When I click on the search bar, it show this big space with the height of 54px and I'm trying to make it smaller to 30px so that it will be the same height as the rest of the menu.

Problem: http://gyazo.com/b09a839511aee3b20ccae701d8b79048
Website: http://www.ComingSoon.VisualizeEdits.com/

CSS for the menu:

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,

.nav input {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
}
 
.nav a { 
        text-decoration: none; 
}
 
.nav li { 
        list-style: none; 
}

.nav {
        display: inline-block;
        position: relative;
        cursor: default;
        z-index: 500;
        padding-top: 1px;
}
 
.nav > li {
        display: block;
        float: left;
}

.nav > li > a {
        position: relative;
        display: block;
        z-index: 510;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
 
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #000;
        text-shadow: 0 0 1px rgba(0,0,0,.35);
 
        background:url(images/backgrounds/background.png);
        border-left: 1px solid #4b4441;
        border-right: 1px solid #312a27;
 
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
}

.nav > li:hover > a { 
        background:url(images/backgrounds/top_header.png); 
}
 
.nav > li:first-child > a {
        border-radius: 3px 0 0 0px;
        border-left: none;
}

.nav > li.nav-search > form {
        position: relative;
        width: inherit;
        height: 30px;
        z-index: 510;
        border-left: 1px solid #4b4441;
}

.nav > li.nav-search input[type="text"] {
        display: block;
        float: left;
        width: 1px;
        height: 24px;
        padding: 15px 0;
        line-height: 20px;
 
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #999999;
        text-shadow: 0 0 1px rgba(0,0,0,.35);
 
        background:url(images/backgrounds/background.png);
 
        -webkit-transition: all .3s ease 1s;
        -moz-transition: all .3s ease 1s;
        -o-transition: all .3s ease 1s;
        -ms-transition: all .3s ease 1s;
        transition: all .3s ease 1s;
}
 
.nav > li.nav-search input[type="text"]:focus { 
        background:url(images/backgrounds/background.png);
}
 
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
        width: 110px;
        padding: 15px 20px;
 
        -webkit-transition: all .3s ease .1s;
        -moz-transition: all .3s ease .1s;
        -o-transition: all .3s ease .1s;
        -ms-transition: all .3s ease .1s;
        transition: all .3s ease .1s;
}

.nav > li.nav-search input[type="submit"] {
        display: block;
        float: left;
        width: 20px;
        height: 30px;
        padding: 0 25px;
        cursor: pointer;
 
        background:url(images/backgrounds/background.png);
 
        border-radius: 0 3px 0px 0;
 
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
}
 
.nav > li.nav-search input[type="submit"]:hover { 
        background:url(images/backgrounds/top_header.png);
}

.nav > li > div {
        position: absolute;
        display: block;
        width: 100%;
        left: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        background:url(images/backgrounds/background.png);
        border: 1px solid #000;
        border-radius: 0 0 5px 5px;
        -webkit-transition: all .3s ease .15s;
        -moz-transition: all .3s ease .15s;
        -o-transition: all .3s ease .15s;
        -ms-transition: all .3s ease .15s;
        transition: all .3s ease .15s;
}

.nav > li:hover > div {
        opacity: 1;
        visibility: visible;
        overflow: visible;
}

.nav .nav-column {
        float: left;
        width: 20%;
        padding: 2.5%;
}
 
.nav .nav-column h3 {
        margin: 20px 0 10px 0;
        line-height: 18px;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 14px;
        color: blue;
        background:url(images/backgrounds/background.png);
        text-transform: uppercase;
}
 
.nav .nav-column h3.orange { 
        color: green; 
}
 
.nav .nav-column li a {
        display: block;
        line-height: 26px;
 
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #888888;
}
 
.nav .nav-column li a:hover { 
        color: #666666; 
}

Your search box coming down.

This:

.nav > li.nav-search > form

Try setting the position from relative to absolute.
Then fix the position, if required, by margin-top: -30px;

Just take a try and see what happens.

(2013-07-20, 03:20 AM)effone Wrote: [ -> ]Your search box coming down.

This:

.nav > li.nav-search > form

Try setting the position from relative to absolute.
Then fix the position, if required, by margin-top: -30px;

Just take a try and see what happens.

It doesn't work, it just completely mess it up. I changed it back to relative. :/

---

(2013-07-20, 03:20 AM)effone Wrote: [ -> ]Your search box coming down.

This:

.nav > li.nav-search > form

Try setting the position from relative to absolute.
Then fix the position, if required, by margin-top: -30px;

Just take a try and see what happens.

I included the CSS above!

---

If I make the position absolute, it would not push the search button when opening the text field.

Change height to 0 to make the input the same height when not hovered.

.nav > li.nav-search input[type="text"] {
    height: 0;
}

Add this to fix the height when hovered.

.nav > li.nav-search input[type="text"]:focus, .nav > li.nav-search:hover input[type="text"]
    padding: 3px 20px;
    height: 24px;
}

It work perfectly! Thanks!