Full Width Responsive Content Area Drop Down

[bigshoe]

I am trying to create a Full Width Responsive Accordion Drop Down Menu using Bellows Plugin using shortcode within a Content Area Drop Down. I can make it the width that I want but then it’s not responsive. It will be responsive but not full width.

I can make it work using Content Area Modal at the correct size (Width: 100% Max-width:1200px) but then the modal is in the middle of the page and not under the header bar.

My client would like to mimic this header (https://www.montview.org/who-we-are/)

This is the site that I am working on http://aurorasistercities.org/bigshoe.

I’ve tried a variety of options as over the past 2 days and there are many solutions that are close but not functional.

[ruenel]

Hello @BigShoe,

Thanks for writing in!

The example website is only using X theme. If you want to replicate the navbar, please switch to the default navbar by not assigning any custom headers. Make sure that you have assigned the menu as your primary menu. And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media screen and (min-width: 980px) {
  .x-nav-wrap.desktop {
    display: none;
  }
  .x-btn-navbar, .x-btn-navbar.collapsed {
    font-size: 24px;
    display: block;
    width: 4%;
    float: right;
  }
  .mobile-menu-only {
    display: none;
  }
}

Please let us know if this works out for you.

[bigshoe]

Thanks, it was helpful.
Not what I was hoping for as I do like the control and easy edibility of header templates without having to code css. Hopefully, the functionality of the different elements in Pro will soon be better (who uses flyout drop down menus??).

Now I have to figure out how to add buttons to the header not in the menu. Back to coding.

Thanks for your help.

[bigshoe]

Actually, I lied. It doesn’t work completely.

The inline nav has disappeared and the burger menu is there but on any screen min-width: 980px the menu doesn’t open.

Digging through the css now to see where I can make a change… and add the buttons.

[bigshoe]

Fixed it… the final css is this:

@media screen and (min-width: 980px) {
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 24px;
display: block;
float: right;
}
.x-nav-wrap.mobile.x-collapsed{display:none}
.x-nav-wrap.mobile{display:block}

.mobile-menu-only {
display: none;
}
}

[thai]

Glad you have sorted it out.