CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3navbar
HenonoaH
HenonoaH

Reputation: 399

How to place navbar menu below logo?

I have built this header using custom CSS and bootstrap class names. I have tried z-index, float: initial properties already. Thanks in advance

.branding-preview {
    height: 75px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #0071bb;
}

.branding-logo {
    float: left;
    height: 50px;
    font-size: 18px;
    padding: 15px 15px;
}

.branding-logo img {
    width: 300px;
    height: 50px;
}

.branding-powered-by-logo {
    float: right;
    height: 50px;
    color: white;
    font-size: 15px;
    padding: 2px 10px;
}

.preview-menu {
    margin: 30px 0 0 0;
}

.preview-menu > li > a {
    margin: 0 3px;
    color: white;
    text-transform: uppercase;
    border-bottom: solid 1px transparent;
    background-color: transparent !important;
}
<div class="branding-preview">
	<div class="branding-logo">
		<img id="branding-logo" src="/path/to/logo">
	</div>
	<div class="branding-powered-by-logo">
		<span>Powered By</span>
		<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
	</div>
	<ul class="navbar-nav navbar-right nav preview-menu">
		<li><a>Start</a></li>
		<li><a>Plan</a></li>
		<li><a>Manage</a></li>
		<li><a>Learn</a></li>
		<li><a>Admin</a></li>
	</ul>
</div>

This is the result that I am getting with the current code, actual result:

enter image description here

This is what I'm hoping it will look like, expected result:

enter image description here

Upvotes: 0

Views: 1565

Answers (2)

Baro
Baro

Reputation: 5520

Isn't simple without all the css rules, but the concept is: Create a wrapper floated to right and inside create 2 lines, one for the branding-powered-by-logo and display:block the second line is depend from actual CSS but probably works without modify anything.

If you can post the real page we can help you with more precision. Hope this help you.

.branding-preview {
    display:block;
    height: 75px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #0071bb;
}

.branding-logo {
    float: left;
    height: 50px;
    font-size: 18px;
    padding: 15px 15px;
}

.branding-logo img {
    width: 300px;
    height: 50px;
}

.branding-powered-by-logo {
    /* ADDED */
      display:block;
      text-align:right;
    
    height: 50px;
    color: white;
    font-size: 15px;
    padding: 2px 10px;
}

.preview-menu {
    margin: 0px 0 0 0;
}

.preview-menu > li > a {
    margin: 0 3px;
    color: white;
    text-transform: uppercase;
    border-bottom: solid 1px transparent;
    background-color: transparent !important;
}


/* ADDED */
.wrapper-logo-navbar {
  float: right;
}
.preview-menu > li {
  display: inline-block;
}
<div class="branding-preview">
	<div class="branding-logo">
		<img id="branding-logo" src="/path/to/logo">
	</div>
  
  <div class="wrapper-logo-navbar">
    <div class="branding-powered-by-logo">
      <span>Powered By</span>
      <img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
    </div>
    <ul class="navbar-nav navbar-right nav preview-menu">
      <li><a>Start</a></li>
      <li><a>Plan</a></li>
      <li><a>Manage</a></li>
      <!-- removed some elements for the rendering on StackOverflow -->
    </ul>
  </div>
</div>

Upvotes: 1

ProfiWebDev
ProfiWebDev

Reputation: 9

I think you just need add position:absolute; right:0px; to your .preview-menu class.

Upvotes: 0

Related Questions