How to Install Menu Plugin Alongside Theme

Hi

I’m thinking of installing a mobile menu plugin, but I want to eliminate any conflict between the the theme’s menu and the plugin’s. I’m hoping to use this plugin

How do I disable the theme mobile menu?
How Do I leave room for the plugin?

The screenshot below is a tweak of the theme’s mobile menu and what I would like to achieve and set for mobile and tablet view.

Mobile%20Menu%20Idea%20Top%20of%20Screen

Additionally when the page is scrolled down I want to use a fixed position so the menu stays on the screen like this.

Mobile%20Menu%20Idea

Of course if this can be all done without using third party plugins that would be even better.

Any help appreciated.

Many thanks

Will

Hello Will,

To disable the theme’s mobile menu, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .btn-menu {
        display: none;
      }
    }

Regards,
Kharis

Hi Kharis

That works perfectly. Without disabling the mobile menu is there a way of achieving like what’s in the above screenshots?

Regards

Will

To display the mobile menu navigation on larger screen, try this solution:

Hopefully that helps.

Regards,
Kharis

Hi Kharis

I would like to keep the mobile menu as it is for mobiles and tablets. I just want reposition it like the screenshots I have above.

I want the mobile menu to sit next to the heading and subheading area and then when you scroll down the page it goes into a fixed position. When someone clicks on the Hamburg icon I want it it float out to the left like in the above screenshot.

Can this be achieved by tweaking the CSS with a child theme? If so have you got any pointers please?

Kind regards

Will

Hello Will,

Sorry for incorrect direction and thank you for adding more details. To achieve it, try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width:1024px){
            
      .header-wrap .container{
        text-align: left;
      }

      .header-wrap .btn-menu{
        float: right;
        margin-right: 15px !important;
      }  

      .header-wrap .col-md-4 {
        max-width: 90%;
        position: relative;
        z-index: 2;
      }

      .header-wrap .col-md-8 {
        margin-top: -65px;       
      }        

      #mainnav-mobi {
        top: 50px;
      }
      
    }

    @media only screen and (min-width: 500px) {
      #mainnav-mobi {
        right: 0;
        max-width: 370px;
      }  
    }

Regards,
Kharis

Hi Kharis

Sorry for the late reply; I’ve only just got round to testing it.

It works almost perfectly but I’m just trying to tweak it slightly. I would like to utilise a fixed CSS position.

Is there a way of aligning it with the title and description and then when it scrolls down it jumps up to a fixed position on the page. Please screenshots below

P.S there is one slight bug. At 1024px width the there is a bit of a crossover clash. It might be the custom CSS in the child theme. I will try and remove some of it to see if it clears it up and I’ll update you.

Many thanks

Will

Hello Will,

Is there a way of aligning it with the title and description and then when it scrolls down it jumps up to a fixed position on the page. Please screenshots below

In the last code I have suggested, try adjusting these lines of code:

.header-wrap .col-md-8 {
  margin-top: -65px;       
}  

Replace -65px to 60px.

Is there a way of aligning it with the title and description and then when it scrolls down it jumps up to a fixed position on the page. Please screenshots below

Try adding this CSS code:

    @media only screen and (max-width: 1024px) {
      .site-header.float-header .col-md-8 {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        margin-top: 0;
      }
      .site-header.float-header .btn-menu {
        color: #ff0000 !important;
      }
    }

Regards,
Kharis