1

How to create navbar with 2 rows (with difference colors) and set logo inside navbar like this? Link to image (how it should be): https://i.stack.imgur.com/DkdYZ.png

I have tried these but it's not what i'm search: Bootstrap 4: Navbar with logo and 2 rows or Bootstrap 4 navbar with 2 rows

So, every line has different colors. Otherwise it look like 1-color big panel with logo.

How to set it correctly?

A have created this with position: absolute. I think it is not good idea. https://codepen.io/AntonFix/pen/moozJQ

HTML:

<div class="row bg-custom2">
    <div class="container">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6 offset-md-4 float-right my-3">
                    Call us! | WhatsApp | E-mail
                </div>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-custom navbar-logo">
    <a href="#" class="navbar-brand">
        <img class="logo-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/320px-Test-Logo.svg.png" alt="Logo">
    </a>
</nav>

CSS:

.logo-image {
    position: absolute;
    height: 90px;
    top: -2.2rem;
}
Joel
  • 5,732
  • 4
  • 37
  • 65
  • Approached you tried for above issue is somehow ok but not professional, you have to align ul li item to right because as now its showing left. – VISHAL SINGH Mar 28 '19 at 10:45
  • what about this: https://jsfiddle.net/7espdrmb/2/ , it is not positioned absolutely, but it does count on the top navbar being aligned to the right – Mannaroth Mar 28 '19 at 10:53
  • Align ul li item to right is not good for me. –  Mar 28 '19 at 10:54
  • 1
    ah, on the image it is aligned to the right – Mannaroth Mar 28 '19 at 10:56
  • @Mannaroth, thanks a lot, but it is not Bootstrap :) –  Mar 28 '19 at 10:56
  • yes, but it does solve your problem with the logo? it is no longer positioned absolutely, you just need to apply it with boostrap if you want to, or dont since it works – Mannaroth Mar 28 '19 at 10:59
  • @Mannaroth, thank you for help. –  Mar 28 '19 at 11:26

0 Answers0