0
Opened

How can I centre my logo and “burger” menu for small mobile devices?

dazzastark 2 years ago updated by christopherm 2 years ago 9

Hello,

Using the BoldGrid theme Cobalt for Consulting (not marketing) and need to Center the logo and “burger” menu for small mobile devices. I tried changing the CSS but no avail. Could someone help?

Using the Google Dev Tools I found the elements:

.palette-primary .navbar-default .navbar-toggle, .palette-primary

and constructed the following CSS code to make it more responsive:

@media (max-width: 768px) {
.palette-primary .navbar-default .navbar-toggle, .palette-primary {
display: flex !important;
flex-direction: column !important;
margin: auto !important;
}
}

You can use that to try and modify the CSS, however, making customizations to the theme through the CSS is not ideal and may be overwritten during updates to your theme. If that occurs you can simply reapply the CSS through the Editor. 

I hope this helps!

Sincerely,

Carlos D

Tried this and something is not taking.

I am using boldgrid and the custom css section in the customizer.

I'd recommend targeting the element using your browser's developer tools. That way you can try CSS code live.

Sorry for the delay. Please try the URL: norbar.ca again on a smaller responsive device to see the issue.

Opened

Thanks for the URL and I apologize for the long wait. Unfortunately, I'm unable to see past the under construction page. Do you have an URL which shows the issue?

Sorry for the inconvenience. Would you be comfortable providing the domain having this issue? There may be interferring code from another plugin or custom setting.

Thanks, this worked for the logo but not the menu.

Any suggestion for the "burger" menu button (collapsed and open)?

Answered

You add the following to achieve this:

@media (max-widht: 768px) {

.site-title img,

button.navbar-toggle{

display: flex !important;

flex-direction: column !important;

margin: auto !important;

}

}