Center navbar buttons

Topic: Center navbar buttons

Austin asked 6 years ago

Is it possible to center the navbar buttons but leave the navbar brand at the left?

Piotr Glejzer staff commented 6 years ago

Hi, yes, I think it is possible. You can use our documentation about flexbox to style what do you want --> Flexbox But If you can show me your code I will try to help you. I recommend using the latest version of mdb because we change a few things in our code. Best, Piotr

Add comment

Austin answered 6 years ago

0 0 Best answer

Ok I did try centering the div tag different ways but it just centers the first button and the other buttons are too far to the right. Here is my code, I think I'm using the latest version but I'm not sure how to check:


<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="https://mysite.com" style="margin-right: 2.5rem; font-family: 'LibreBodoniRegular'; font-weight: normal; font-style: normal; letter-spacing: 0.5px;" ><img src="https://mysite.com/themes/zanor-zanor-mdb-loaded/assets/images/PS.svg" class="img-fluid mb-1" style="width: 100% 9; max-width: 12%; height: auto" alt="PS Logo">&ensp;PS</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        {% if staticMenu.menuItems %}
        {% set items = staticMenu.menuItems %}
        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            {% for item in items %}
                <li class="nav-item {% if this.page.title == item.title %} active {% endif %}">
                    <a class="nav-link" href="{{ item.url }}">{{ item.title }} {% if this.page.title == item.title %} <span class="sr-only">(current)</span> {% endif %}</a>
                </li>
            {% endfor %}
        {% endif %}
        </ul>
        <!-- Links -->
    <!-- Collapsible content -->

</nav>
<!--/.Navbar-->

Piotr Glejzer staff commented 6 years ago

Hi, can you check this? You need to remove mr-auto class and doing something like this.

      
<div class="collapse navbar-collapse d-flex justify-content-center" id="navbarSupportedContent">
 <ul class="navbar-nav">

Austin commented 6 years ago

That doesn't work with the <a class="navbar-brand" element as it is still too far to the right. If I remove the navbar-brand it is centered but I want it centered with the logo in the navbar at the left.

Piotr Glejzer staff commented 6 years ago

You can use position absolute/relative to do this. Try my code. Style by #id is not a good option you can style but another class.


    @media (min-width: 991px) {
      #navbarSupportedContent {
        position: relative;
        left: -64px;
      }
    }
    .navbar {
      background-color: transparent;
      position: absolute;
    }

Austin commented 6 years ago

left: -64px; does not translate the same over different display sizes right? There's no way to do this so it will show up in the exact center of the display on any monitor size?

Austin commented 6 years ago

Is it possible to only enable "d-flex justify-content-center" on the desktop site?

Add comment

Austin answered 6 years ago

0 0 Best answer

CSS:

/* Your custom styles */
/* Navigation*/

.navbar {
    background-color: transparent;
    letter-spacing: 0.75px;
}

.nav-blue {
    background-color: #2b3b68;
}

.scrolling-navbar {
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.navbar .btn-group .dropdown-menu a:hover {
    color: #000 !important;
}
.navbar .btn-group .dropdown-menu a:active {
    color: #fff !important;
}
.top-nav-collapse {
    background-color: #177BA8;
}

.view {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

@media (min-width: 991px) { #navbarSupportedContent { position: relative; left: -64px; } } If you will use this code, it's not necessary to code below this what Ii posted lately, It will be always displayed -64px on large devices like desktops. It's not necessary to use my code .navbar with position absolute because it's breaking fixed navbar. Did you try this? If you want use justify-content only to desktops you can use something like this "justify-md-content" and you can check our documentation Flexbox - justify content.

Austin commented 6 years ago

Ok thanks. Is it possible to only enable d-flex on the desktop site?

Piotr Glejzer staff commented 6 years ago

Yes, it is possible with d-md-flex or d-lg-flex. Everything is in our documentation ! Have a nice day.

Austin commented 6 years ago

I am trying to add nav-flex-icons and this breaks the centered navigation link buttons. I want the navbar icons to be on the left side of the nav bar and the link buttons to be centered. Also the last button/icon "Free Quote" is not positioned properly on mobile, its just a bit misaligned with the rest of the icons within the dropdown menu. Here's my site: https://partysprings.com

Piotr Glejzer staff commented 6 years ago

Add something like that :

and

to your ul list with links. It should fix links and flex icons. Do you want a center links in the display on large devices?

Add comment

Daimi Lamorú answered 6 years ago

0 0 Best answer

Hello from Cuba I am a begineer learner . when I copy and paste de code of button, I can't see de correct rresult.. why? Thank you very much Daimi

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Hi Daunu Lamorú, May you show me which buttons did you paste? Do you use our free or pro package? Did you see our tutorial Quick start ? Best, Piotr

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Hi Austin, Add something like that

<ul class="navbar-nav ml-auto nav-flex-icons d-md-flex align-items-center">

and

<ul class="navbar-nav text-center"> to your ul list with links.

It should fix links and flex icons. Do you want a center links in the display on large devices? Best, Piotr

Add comment

Austin answered 6 years ago

0 0 Best answer

Yes I would like to center on large devices. <ul class="navbar-nav ml-auto nav-flex-icons d-md-flex align-items-center"> seems to work to center the buttons, but I don't want to center them on the mobile site. How can I disable this on the mobile site?

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Hi, You pasted wrong code into your ul list.

It should looks like that.

<ul class="navbar-nav">

<li class="nav-item active ">

<a class="nav-link waves-effect waves-light"href="http://partysprings.com">Home <span class="sr-only">(current)</span>

</a>

</li>

<li class="nav-item ">

<a class="nav-link waves-effect waves-light"href="http://partysprings.com/packages">DJ Packages </a>

</li>

<li class="nav-item ">

<a class="nav-link waves-effect waves-light"href="http://partysprings.com/testimonials">Testimonials </a>

</li>

<liclass="nav-item ">

<a class="nav-link waves-effect waves-light"href="http://partysprings.com/about">About </a>

</li>

<liclass="nav-item ">

<a class="nav-link waves-effect waves-light"href="http://partysprings.com/contact">Contact </a>

</li>

</ul>

If you are add 'text-center' to here is should be center but you don't want so only say.

Next you need add something like that to your nav-icons with button.

<ul class="navbar-nav ml-auto nav-flex-icons d-md-flex align-items-center">

<li class="nav-item">

<a class="nav-link waves-effect waves-light"href="https://twitter.com/partyspringsfl">

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

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light"href="https://www.instagram.com/partyspringsfl">

<i class="fa fa-instagram"></i>

</a>

</li>

<li class="nav-item">

<a class="nav-link waves-effect waves-light"href="https://www.facebook.com/PartySprings">

<iclass="fa fa-facebook-official"></i>

</a>

</li>

<li class="nav-item">

<a class="nav-link waves-effect waves-light"href="https://soundcloud.com/partyspringsproductions">

<i class="fa fa-soundcloud"></i>

</a>

</li>

<li class="nav-item">

<form class="form-inline my-2 my-lg-0 ml-auto waves-effect waves-light">

<a href="https://partysprings.com/contact"rel="nofollow" class=" waves-effect waves-light"><button class="btn btn-outline-white btn-sm my-2 my-sm-0 ml-3 waves-effect waves-light"

type="button">Free Quote</button></a>

</form>

</li>

</ul>

It should work. I apologize for the inadequate translation last time.

Add comment

Austin answered 6 years ago

0 0 Best answer

Ok it seems to be working in google chrome but right of center in microsoft edge. Is there a way to fix this?

Piotr Glejzer staff commented 6 years ago

Microsoft Edge has fully support flexbox so it's probably some error did it, check your console. Have a nice day. Best Piotr.

Austin commented 6 years ago

I don't see any errors in the console. The navbar is also relatively large compared to how it appears in other browsers.

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Hi, If you want to fix this on edge you have to add that code to your ul:

<ul class="navbar-nav ml-auto nav-flex-icons d-md-flex align-items-center w-100">

But If you will do this it will be broke on other browers because on IE/edge is a bug with 'ml-auto'. Best, Piotr

Add comment

Austin answered 6 years ago

0 0 Best answer

Is it possible to have different styling for edge only?

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

Can you check this commends?

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){

body{

background-color:#00FF00;

}

}

@media screen and (-webkit-min-device-pixel-ratio:0){

body{

background-color:#FF0000;

}

}

@-moz-document url-prefix() {

body{

background-color:#0000FF;

}

}

Add comment

Austin answered 6 years ago

0 0 Best answer

That seems to make the background red on chrome/edge/safari/opera, blue on firefox, and green on IE.

Piotr Glejzer staff commented 6 years ago

Because this is not a standard and will not work for every user/browser.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast

Add comment