Center menu tabs over mobile

Hi,

Have you fixed this?
I don't see a the secondary menu...
The one I see is center...

Hi there. On this page over mobile you'll see a hamburger menu and if you click on it those tabs should be centered and the social media icons should be centered and on one line...  https://ccdenver.org/newsroom/

What do you think?

Hi

for the text menu add

 text-align: center;

Select allOpen in new window

.fl-node-5b2af537cbdfc .fl-menu .menu, .fl-node-5b2af537cbdfc .fl-menu .menu > li {
    font-size: 16px;
    text-transform: none;
    text-align: center;

Select allOpen in new window

for the social li
you can try this

vertical-align: middle;

Select allOpen in new window

and remove the margin-left

.linkedin-icon {
    background-image: url(https://ccdenver.org/wp-content/uploads/2018/07/LinkedIn-thumb_25x25.jpg);
    background-repeat: no-repeat;
    width: 26px !important;
    height: 26px !important;
    margin-top: 7px !important;
    /* margin-left: 7px !important; */
    vertical-align: middle;
}

You may also want to check in your JS file as some menu have hardcoded CSS class in JS.
If this is a premium template you can ask the author for support.

Okay I did all of that and I see those menu tabs centered but the social media icons are not centered and on one horizontal line. Also, anyway to center that logo over mobile too?

You can use media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp

these are CSS classes that will be applied to a specific width

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...} 

Select allOpen in new window

Okay and how would I use those media queries to make those social media icons be on one line and centered?

Try something like
 

@media only screen and (max-width: 600px) {
   .mycustom {
           display:block;
           text-align:center
          vertical-align: middle;
   }
} 

Select allOpen in new window

lenamtl, where is the css class 'mycustom' on those social media buttons?

You have to create a class 'mycustom' or anyname that not already exist in CSS file then add the class name to you menu item class="someclass mycustom otherclass"

If this not working on the li class try to add a span

<span class="mycustom"> icon here </span>

Select allOpen in new window

The site is a Wordpress site and uses Menus. Each social media icon already has a class assigned to it such as this...

.linkedin-icon {
    background-image: url(https://ccdenver.org/wp-content/uploads/2018/07/LinkedIn-thumb_25x25.jpg);
    background-repeat: no-repeat;
    width: 26px !important;
    height: 26px !important;
    margin-top: 7px !important;
    /* margin-left: 7px !important; */
    vertical-align: middle;
}

What do you suggest?

You can tried to add the following to your site css file

@media only screen and (max-width: 600px) {
   .linkedin-icon {
           display:block;
           text-align:center
           vertical-align: middle;
   }
} 

Select allOpen in new window

You have to be careful when editing the actual class, because maybe the .linkedin-icon  class may be use elsewhere.

The problem with menu is often  they have some hardcoded css in the Javascript...

You can try to contact the theme author too.