Docs

[-core]

Hi,

i have a couple of questions and need help with the Integrity stack Header Menu.

1) On the Main Page, on mobile devices etc, the Drop-down menu does not ‘Drop-down’ on the page. How can i enable it to ‘Drop-down’?

2) On my other pages (E.G. About, Services, etc), the Drop-down menu is on the left. How do i get it to appear on the right below the menu icon?

3) On my other pages (E.G. About, Services, etc), there is a gap between the Drop-down menu and the header. How do i remove this gap?

Thanks!

[-core]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please find and remove this code :

.x-navbar {
    height: 75px;
}

#2 Please remove width property from following code :

.x-navbar .mobile .x-nav li > a {
    border: 0;
    background-color: black;
    width: 150px;
    padding-right: 20px;
}

#3 Please add this code :

.x-navbar .mobile .x-nav {
    margin: 0px 0;
}

@media (max-width:979px){
ul#menu-main-menu-1 {
    width: 150px;
    float: right;
}
}

Hope it helps.

[-core]

Hi Christopher,

thanks so so much for the help!

There is just 1 more thing that i wasn’t too clear about the specifications.

i would like the drop-down menu to drop-down without shifting the whole page down (similar to what the main page is right now, rather than what all the other pages are doing when in mobile display), with the width of that drop down menu to be 200px.

Thanks again!

[Rupok]

Hi there,

In that case you can use the below code :

@media only screen and (max-width: 979px) {
.x-navbar {
  left: 0;
  position: absolute;
  right: 0;
  top: 46px;
}

.x-main.full {
  margin-top: 80px;
}
}

Hope this helps.

[-core]

Thanks Rupok!

A little closer now.

The last thing is that when the menu drops down, the width of the drop down menu should only be 200px. Meaning that to the left of the drop down menu, i should be able to see the page.

[Rupok]

Hi there,

Let’s try adding this as well :

.x-nav-wrap.mobile {
  position: absolute;
  right: -27px;
  top: 56px;
  width: 200px;
}

Cheers!

[-core]

Hi Rupok,

that is absolutely perfect!
Thank you so much!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts