Menu breaks between 768px and 1024px

This topic has 1 reply, 2 voices, and was last updated 4 years, 10 months ago by acmethemes.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
January 21, 2019 at 2:45 am #43778
benpaddlejones
Participant
Hi
I have replicated this issue after disabling all plugins and removing all custom CSS before reporting this issue:

The menu buttons displays correctly below 768px.
The horizontal menu displays correctly above 1025px.
Between 768 & 1024px the menu displays as a list without CSS.

URL: https://www.tridentglass.com.au/

Behavior replicated on IE, chrome and edge

Also can the mobile menu button be centered below the logo?

Other than this issue this is the first site I have designed using an ACMETHEME and found the theme to be well designed and highly functional. It integrates perfectly with SiteOrigin page builder.

Ben
- This topic was modified 5 years, 4 months ago by benpaddlejones.
July 22, 2019 at 1:06 pm #65056
acmethemes
Keymaster
Dear benpaddlejones,
For the mobile menu button to be centered below the logo.
Please add the following CSS code in Additional CSS
Appearance > Customize > Additional CSS
```
@media (max-width:1024px){
    .navbar-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .navbar-toggle {
        order: 2;
        margin-top: 20px !important;
    }
    .custom-logo-link {
        order: 1;
    }

}
    
```
In the debugging process, we found that parent theme style is loaded before boostrap.min.css which is not a valid way to load style. Here is the actual hierarchy of style loading. “bootstrap.min.css” should be load first then parent theme style.css then after child theme style.css.

Note: If you feel difficult to create child theme properly then we recommend to use )( https://wordpress.org/plugins/child-theme-configurator/ ) plugin to create a child theme.

Best Regards!
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.