Docs

[Super]

Thanks for all your help on this.
That works great.

If I wanted to replace the hero image with a rev slider. How would I do this and still keep the slider overlaying the nav bar as the hero image currently is?

[Super]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

#1] To get rid of the mobile menu and show the menu by default, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-navbar .mobile .x-nav li a {
    color: green;
}

.masthead-inline .x-btn-navbar,
body .x-btn-navbar, 
body .x-btn-navbar:hover {
    display: none;
}

body .x-nav-wrap.mobile {
    display: block !important;
}

#2] To center the logo and the menu links, you can make use of this code:

@media(max-width: 767px){
  body .x-brand.img {
      float: none;
      text-align: center;
      width: 100%;
      background-color: rgba(0,0,0,0.65)
  }

  .x-navbar .mobile .x-nav li a {
      text-align: center;
  }

  #x-menu-item-phone a {
      padding-top: 12px;
  }
}

#3] It is already fixed when adding the code in #2.

Please let us know how it goes.

[Super]

This reply has been marked as private.

[Christopher]

Hi there,

No problem. You can set slider below masthead, see : https://community.theme.co/kb/sliders

Hope it helps.

[Super]

This reply has been marked as private.

[Super]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

body .x-nav-wrap.mobile {
    display: block !important;
}
.x-navbar .mobile .x-nav li a {
    color: green;
}

And update it to :

@media (max-width:979px){
body .x-nav-wrap.mobile {
    display: block !important;
}
header.masthead.masthead-inline {
    height: 0;
}
.x-navbar .mobile .x-nav li a span {
    color: #000 !important;
}
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Hope it helps.

[Super]

This reply has been marked as private.

[Super]

This reply has been marked as private.

[Lely]

Hi There,

See attached screenshot of what I am seeing at the moment.

1.) Hamburger menu is already hidden
2.) The logo is centered too.
3.) To avoid the menu from overlapping the site content, please update this custom CSS:

@media (max-width:979px){
body .x-nav-wrap.mobile {
    display: block !important;
}
header.masthead.masthead-inline {
    height: 0;
}
.x-navbar .mobile .x-nav li a span {
    color: #000 !important;
}
}

To this:

@media (max-width:979px){
body .x-nav-wrap.mobile {
    display: block !important;
}
.x-navbar .mobile .x-nav li a span {
    color: #000 !important;
}
}

4.) The links are centered too

Hope this helps.

[Super]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
.x-brand.img {
     display:block;
     background:url(https://gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-Black-1.png) top left no-repeat;
     width:200px;
     height:78px;
     background-size:contain;
}

.x-brand img {
    display:none;
}
}

Hope that helps.

[Author]

Posts