CODEWITHSUNDEEP
cssmenu
Wojciechk
Wojciechk

Reputation: 99

CSS menu with search field - Chrome, FF and IE

I wanted to create a nice, inherently simple menu in css. In chrome it looks ok but in ff it looks awful.

let's say i have nav layer (40px height, width 100%):

<nav id="navbar">
<div class="main-navigation">
    <ul> (list-style:none;)
        <li><a href="#">Home</a></li>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page2</a></li>
        <li><a href="#">Page3</a></li>
        <li><a href="#">Page4</a></li>
    </ul>
    <div class="search">
        <form method="get" action="">
            <input type="text" name="q" class="search-input" placeholder="Type here" />
            <input type="submit" class="search-btn" value="Search" />
        </form>
    </div>
</div>
</nav>

I would like to have all buttons with height 30px, font-size: 14px; and border-radius: 5px; and search input and submit button (input - height 30px; border-radius: 5px 0 0 5px; submit - height 30px; border-radius: 0 5px 5px 0;)

is there any way to position them to be displayed in one, equal line?

many thanks

Upvotes: 0

Views: 584

Answers (2)

SotoArmando
SotoArmando

Reputation: 118

Try with this. this Is a really good article. its easy to rely on flex box to achieve a good design.

https://www.freecodecamp.org/news/you-just-need-to-know-these-properties-to-start-loving-css-a06aca6087e9

<style>
    nav {

        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    nav a {
        display: inline-block;
        padding: 10px;
    }
    nav a:hover {
        color: red;
        cursor: pointer;
    }

    div.search {
        display: inline-block;
        color: red;


    }

    input.search-input {
        padding: 10px;
    }

    input.search-btn {
        padding: 10px !important;
        background-color: grey;
        border: 2px solid black;
        color: white;

        box-sizing:border-box;
    }
</style>
<nav id="navbar">

    <div>
        <a>Button 1</a>
        <a>Button 1</a>
        <a>Button 2</a>
        <a>Button 1</a>
    </div>
    <div class="search">
        <form method="get" action="">
            <input type="text" name="q" class="search-input" placeholder="Type here" />
            <input type="submit" class="search-btn" value="Search" />
        </form>
    </div>
    <div>
        <a>Sign up</a>
    </div>

</nav>

Upvotes: 0

devstruck
devstruck

Reputation: 1507

Inline-block is your best alternative. It's a small adjustment in thinking, but well worth it. Re-fiddled

Upvotes: 0

Related Questions