MDB 4 Navbar-brand center.

Topic: MDB 4 Navbar-brand center.

Avrohom free asked 6 years ago

Hi,

Was wondering if it is possible to place a .navbar-brand or website logo horizontally in the center (middle) of a .nav component.

I have tried for hours but couldn't get it.

Ollie Vincent pro commented 6 years ago

Hi, What do you mean? Do you mean a centred logo with nav links either side? Or centered logo with nav links on left/right?

Avrohom free commented 6 years ago

Hi @Ollie, Thanks for your reply. Yes, I wanted a centered logo with nav links far right and far left.

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

<p>Update:</p>
<p>You HTML will look something like this:</p>
<pre><nav class="mb-1 navbar navbar-expand-lg navbar-dark default-color">

<aclass="navbar-brand m-auto mobile-show"href="#">Navbar</a>

<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent-3"aria-controls="navbarSupportedContent-3"

aria-expanded="false"aria-label="Toggle navigation">

<spanclass="navbar-toggler-icon"></span>

</button>

<divclass="collapse navbar-collapse"id="navbarSupportedContent-3">

<ulclass="navbar-nav mr-auto">

<liclass="nav-item active">

<aclass="nav-link waves-effect waves-light"href="#">Home

<spanclass="sr-only">(current)</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Features</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Pricing</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink-3"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">Dropdown

</a>

<divclass="dropdown-menu dropdown-default"aria-labelledby="navbarDropdownMenuLink-3">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

<aclass="navbar-brand m-auto mobile-hide"href="#">Navbar</a>

<ulclass="navbar-nav ml-auto nav-flex-icons">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-twitter"></i>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">

<iclass="fa fa-user"></i>

</a>

<divclass="dropdown-menu dropdown-menu-right dropdown-default"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</div>

</nav>

</pre>
<p>And your CSS something like this:</p>
<pre>
   @media(min-width:992px){.mobile-show{display: none;}}

@media(max-width: 991px){.mobile-show{display: block;}
.mobile-hide{display: none;}}
    </pre>
<p>Thanks</p>

Please insert min. 20 characters.

Update:

You HTML will look something like this:

<nav class="mb-1 navbar navbar-expand-lg navbar-dark default-color">

<aclass="navbar-brand m-auto mobile-show"href="#">Navbar</a>

 

<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent-3"aria-controls="navbarSupportedContent-3"

aria-expanded="false"aria-label="Toggle navigation">

<spanclass="navbar-toggler-icon"></span>

</button>

<divclass="collapse navbar-collapse"id="navbarSupportedContent-3">

<ulclass="navbar-nav mr-auto">

<liclass="nav-item active">

<aclass="nav-link waves-effect waves-light"href="#">Home

<spanclass="sr-only">(current)</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Features</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Pricing</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink-3"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">Dropdown

</a>

<divclass="dropdown-menu dropdown-default"aria-labelledby="navbarDropdownMenuLink-3">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

<aclass="navbar-brand m-auto mobile-hide"href="#">Navbar</a>

<ulclass="navbar-nav ml-auto nav-flex-icons">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-twitter"></i>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">

<iclass="fa fa-user"></i>

</a>

<divclass="dropdown-menu dropdown-menu-right dropdown-default"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</div>

</nav>

And your CSS something like this:

   @media(min-width:992px){.mobile-show{display: none;}}

    @media(max-width: 991px){.mobile-show{display: block;}
.mobile-hide{display: none;}}

Thanks

Avrohom free commented 6 years ago

Dear Ollie, Many thanks for your kind help. In principle this is the way to follow. However I have changed a few things. 1) Instead of using ml-auto and mr-auto, I have utilized the Bootstrap grid layout system and assigned col classes. That's because the m{x}-auto gives you calculated margins in addition to elements own size. So a element with 5 items + the computed margins will differ in size from a element that has only got two sub-elements, resulting in that the navbar-brand Icon/text I want to have in the middle not to be exactly centered. 2) Thanks for the @media suggestions. But I think that with Bootstrap 4 you can use already available classes for them. So for the first instance I gave .d-lg-none, and for the second navbar-brand instance I gave .d-none .d-lg-flex. (The nav is expanded at the lg breakpoint .navbar-expand-lg). All the best.

Please insert min. 15 characters.

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

I suggest you create a second instance and style them in media queries to show on specific devices.

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

<p>Hi,s</p>
<p>I have only looked at it on desktop and not mobile. To have the brand show at the top you could use media queries.</p>
<p>You could try something like this:</p>
<pre><nav class="mb-1 navbar navbar-expand-lg navbar-dark default-color">

<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent-3"aria-controls="navbarSupportedContent-3"

aria-expanded="false"aria-label="Toggle navigation">

<spanclass="navbar-toggler-icon"></span>

</button>

<divclass="collapse navbar-collapse"id="navbarSupportedContent-3">

<ulclass="navbar-nav mr-auto">

<liclass="nav-item active">

<aclass="nav-link waves-effect waves-light"href="#">Home

<spanclass="sr-only">(current)</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Features</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Pricing</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink-3"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">Dropdown

</a>

<divclass="dropdown-menu dropdown-default"aria-labelledby="navbarDropdownMenuLink-3">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

<aclass="navbar-brand m-auto"href="#">Navbar</a>

<ulclass="navbar-nav ml-auto nav-flex-icons">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-twitter"></i>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">

<iclass="fa fa-user"></i>

</a>

<divclass="dropdown-menu dropdown-menu-right dropdown-default"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</div>

</nav></pre>

Please insert min. 20 characters.

Hi,s

I have only looked at it on desktop and not mobile. To have the brand show at the top you could use media queries.

You could try something like this:

<nav class="mb-1 navbar navbar-expand-lg navbar-dark default-color">

 

<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent-3"aria-controls="navbarSupportedContent-3"

aria-expanded="false"aria-label="Toggle navigation">

<spanclass="navbar-toggler-icon"></span>

</button>

<divclass="collapse navbar-collapse"id="navbarSupportedContent-3">

<ulclass="navbar-nav mr-auto">

<liclass="nav-item active">

<aclass="nav-link waves-effect waves-light"href="#">Home

<spanclass="sr-only">(current)</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Features</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="#">Pricing</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink-3"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">Dropdown

</a>

<divclass="dropdown-menu dropdown-default"aria-labelledby="navbarDropdownMenuLink-3">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

<aclass="navbar-brand m-auto"href="#">Navbar</a>

<ulclass="navbar-nav ml-auto nav-flex-icons">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-twitter"></i>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"

aria-expanded="false">

<iclass="fa fa-user"></i>

</a>

<divclass="dropdown-menu dropdown-menu-right dropdown-default"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</div>

</nav>

Avrohom free commented 6 years ago

Many thanks @Ollie, Problem with this approach is that since the navbar-brand is within the collapsible div. That is hidden on a mobile (small) view. How can I have it shown outside the collapsible div?

Avrohom free commented 6 years ago

Also toggler button appears on the left side instead of right side.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Avrohom

2Support score
1Questions 0Answers 0Snippets