Center navbar from XS down

Support
#1

Hi there,

Two related issues:

  1. I can’t figure out how to center my navbar from XS (480px) down?
  2. How do I change when the nav collapses into the hamburger?

https://www.chorusfp.com/

Thank you so much for your help.

#2

Hi There,

To make the navbar center from 480px screen size, please add this custom CSS under Theme Options > CSS:

@media (max-width: 480px){
    a#x-btn-navbar,
    .x-brand {
        float: none;
        margin: 15px auto;
        text-align: center;
    }
    a#x-btn-navbar {
        width: 53px;
        height: 48px;
        clear: both;
    }
}

You can try with this custom CSS:

@media (max-width: 1024px){
    nav.x-nav-wrap.desktop {
        display: none;
    }
    a#x-btn-navbar {
        display: block;
        float: right;
    }
    .x-nav-wrap.mobile {
        display: block;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Perfect, problem solved but I had to add an !important flag to the float.

Thank you!

#4

You are most welcome. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.