CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmenuheader
PJSANTA
PJSANTA

Reputation: 1

Bootstrap 3 two menu header with big logo

I'm a bootstrap 3 newbie, so please be gentle with me :) I know i'm going completely down the wrong route here. I've tried several approaches, this was just the latest. I've searched for bootstrap 3 websites doing the same thing, so i could learn from them, but can find any (some similar) but not with the big logo)

All I want is a big logo on the left taking up the full height of my header (about 100px) then small menu top right Contact us | Blog | Apply and main menu center bottom of the header space (but not under the logo) starting next to it (ideally centered) with 5 menu options. I tried to add a picture but it wont let me.

heres what I have : `

    <style>
            .smallmenu {
            color: white;
            background-color: #003300;
            padding-right: 20px;
            float: right;
            font-size: 12px;
            line-height: 50px;

        }

        .mainmenu {
            background-color: #0000cc;
            color: white;
            padding-left: 200px;
            float: right;
            line-height: 30px;
            font-size: 16px;
        }

        .logo {
            background-color: #f11f18;
        }
    </style>


</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 logo">
            <img src="img/logo_en2.png" alt="logo">
        </div>
        <div class="smallmenu">
            <ul class="list-inline">
                <li> Contact Us</li>
                <li> Apply Now</li>
                <li> Blog</li>
            </ul>
        </div>

        <div class="col-lg-10 mainmenu">
            <ul class="list-inline">
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
                <li>Menu 5</li>
            </ul>
        </div>
    </div>
</div>

` the coloured backgrounds are just to help me see where things go. Of course as soon as I resize this, it falls apart. if someone could point me in the right direction.. with how the structure should be.. should I use navbars? should I be using col-xx-xx or not in a header? is it just one row, or should it be 2?

I guess on mobile it should have logo and small top menu and the main menu should be stacked.

Really appreciate any help with structure, site to look at or code samples I can learn from.

Thanks

Upvotes: 0

Views: 707

Answers (1)

jcuenod
jcuenod

Reputation: 58385

First bit of advice I would give is start with the broad layout - where all the stuff on the screen is going to go - before you get down to trying to style menus etc. because you never know when inheritance is going to break something.

Is this (fiddle) basically what you're looking fro?

The key concept is:

<div class="row">
    <div class="col"></div>
    <div class="col">
        <div class="row"></div>
        <div class="row"></div>
    </div>
</div>

Upvotes: 1

Related Questions