How to create navbar with outside logo and 2 rows with different colors?

Asked Mar 28 '19 at 08:44

Active Mar 28 '19 at 09:52

Viewed 137 times

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.imgur.com/iBwKZt6.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;
}

edited Mar 28 '19 at 09:52

Joel

4,537
2
33
53

asked Mar 28 '19 at 08:44

Anton

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. – Anton Mar 28 '19 at 10:54
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 :) – Anton 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. – Anton Mar 28 '19 at 11:26

How to create navbar with outside logo and 2 rows with different colors?

0 Answers0