Twitter Bootstrap Question posted in

How to float right menu headers – Twitter bootstrap

my BOOTPLY… MY BOOTPLY HERE

I need my menu items (car, house, street, boat) to float right at same height level as my logo (for desktop dimensions) and everything else to stay the same as current (including mobile toggle menu behaviour).

Is that possible to achieve?

/* CSS used here will be applied after bootstrap.css */

/***** Menu *****/
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
    color: #fff;
}

.menu-container {
    background-color: #fff;
    border-bottom: 1px solid #000;
    min-height: 20px;
    position: relative;
}

.navbar-nav a:hover {
    color: #000;
}

.navbar-nav a:link {
    font-size: 12px;
    font-family: 'century schoolbook';
    color: #000;
    text-decoration: overline;
    text-decoration-color: #A10000;
}

.brand-name a {
    text-decoration: none;
}

.brand-name img {
    max-width: 137px;
    padding: 8px;
/*position:absolute;*/
    left: 0;
}

ul {
    list-style-type: none;
}

.navbar-form input,.form-inline input {
    width: auto;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

#sidebar.affix-top {
    position: static;
}

#sidebar.affix {
    position: fixed;
    top: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
    font-family: 'LuzSans-Book';
    font-size: 14px;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: #A10000;
    color: #000;
	margin-top:4px;
	margin-bottom:4px;
}

.navbar-default .navbar-nav > .active > a {
    background-color: #000;
	margin-top:4px;
	margin-bottom:4px;
}

.navbar-custom-social {
    height: 15px;
    float: right;
    clear: none;
    margin-right: 25px;
}

.navbar-fixed-top {
    padding-top: 0;
}

.navbar-default .navbar-brand {
    color: #777;
    padding: 0;
    height: inherit;
    float: none;
    display: inline-block;
}

.navbar {
    margin-bottom: 0;
}

.navbar-nav {
    margin: 0;
}

.navbar-default {
    background-color: transparent;
    border: 0;
}

.navbar-collapse.collapse.in {
    width: 100%;
}

p.ajaxSearch_intro {
    margin: 0;
}

.navbar-default .navbar-collapse,.navbar-default .navbar-form {
    padding: 0;
}

/*toggle btn */
.navbar-default .navbar-toggle {
    border: 1px solid #000;
    border-radius: 0;
    padding: 5px 10px;
    color: #000;
    background-color: #A10000;
}

#nav.affix .logo_wrap {
    display: none;
}

#nav.affix-top .logo_wrap {
    display: block;
    background-image: url(/assets/images/header-background.png);
    background-color: #fff;
}

#nav.affix .logo_wrap-text {
    display: none;
}

#nav.affix-top .logo_wrap-text {
    display: block;
    background-image: url(/assets/images/header-background.png);
    background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<header id="nav">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar navbar-default navbar-static">
                       
                        <div class="clearfix container navbar-fixed-top">
                            <div class="clearfix menu-container">
                                <div class="pull-right clearfix toggle_btn_wrap">
                                    <a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
                                </div>
                                <div class="pull-left brand-name">
                                    <a href="#"><img alt="***brandlogo***" src="assets/images/logo.png"></a>
                                </div>
                              <div class="clearfix prevent-float"></div>
                                <div class="navbar-collapse collapse">
                                   <ul class="navbar-nav nav">
                                  <li>
                                    <a href="/car" title="car">car</a>
                                     </li>
                                     <li>
                                    <a href="/house" title="house">house</a>
                                     </li>
                                     <li>
                                    <a href="/street" title="street">street</a>
                                     </li>
                                     <li>
                                    <a href="/boat" title="boat">boat</a>
                                     </li>
		</ul>
                                </div>
                            </div>
                        </div>
                    </div></div></div>

</div></header>
Tags:

2

Answers


  1. 0

    You need to use display:inline-block; on both divs that contain your logo and menu items and then float the menu item div to the right.

    Login or Signup to reply.
  2. 0

    The essential necessary changes are:

    1.) Make sure that the CSS rule for .navbar-nav, contains float:right

    2.) From the DIV <div class="clearfix prevent-float"></div>, remove both classes.

    Now the two elements can be next to each other. They are not yet, but that is due to various padding and/or margin settings, which you also have to adjust.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search