Docs

[ajonesx]

My current layout in the full-page mode has the header at the top of the page with the Navbar/main menu stacked underneath. As you move down the page the header scrolls away, but the navbar sticks to the top of the page (which is good!)

However in the mobile mode both the header and navbar/menu scroll away.

Here’s a jpeg showing the default mobile phone header/navbar/menu tab layout in integrity (A) and a Photoshop of what I’m trying to do in the mobile modes (B.)

http://i1315.photobucket.com/albums/t583/ajonesrealtor/XTheme%20Forum%20Pics/Mobile%20Menu%20Bar%20Phone_zpszdjljvps.jpg~original

1) Move mobile navbar and main menu button to the top of the page above the header and keep it fixed there (header should still scroll away) / Set mobile navbar height & b.g. color

2) Position main menu button in mobile navbar at top of page / Set color, width, height, remove the red border

3) Add text ‘MENU’ to mobile navbar by main menu button / position text & set text color

4) Add a phone dial widget to the mobile navbar left / set widget width, height, & b.g. color

Important: All of these changes apply only to the navbar/main menu behavior in *mobile modes. The full page navbar and main menu should remain under the header and as they are currently configured in the full page modes.

*Would like navbar/main menu changes to apply uniformly to all mobile modes including tablets.

http://i1315.photobucket.com/albums/t583/ajonesrealtor/XTheme%20Forum%20Pics/Mobile%20Menu%20Bar%20Tablet_zpsytuopdrp.jpg~original

A Separate Question: What is the drop-down feature in the red circles called? / Are there any controls for it in the customizer? / How do you reposition and disable it?

Thanks

[Rad]

This reply has been marked as private.

[Lely]

Hello There,

Please add thic code on Appearance > Customize > Custom > Edit Global Javascript: to move the position of the mobile menu:
$(".x-btn-navbar").appendTo(".x-topbar");

Then also add this CSS on Appearance > Customize > Custom > CSS:

@media (max-width: 979px){
.x-topbar-inner {
    width: 50% !important;
    float: left;
}
  .admin-bar .x-btn-widgetbar {
    top: 76px; /*Widget Triangle position. Adjust accordingly*/
}
  .masthead-stacked .x-btn-navbar {
    display: inline-block;
    float: right;
    margin-top: 0;
    box-shadow: none !important;
    background-color: green !important;
    width: 50%;
    text-shadow: none;
    border-radius: 0;
    text-align: right;
}
.masthead-stacked .x-btn-navbar:before {
    content: "MENU";
    padding-right: 10px;
    text-shadow: none;
}

}

On Appearance > Customize > Header > Topbar:Set to ON: Topbar content, add the phonenumber

The dropdown feature is your widgets. You can control how many widget you want on Appearance > Customize > Header Widget Areas. We can add content on widgets on Appearance > Customize > Widgets

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[ajonesx]

Hi… I don’t think that there’s anything for you to see on the website.

The #A image that I provided is the only image that actually came from my website as it is now. It’s just the stock Integrity configuration with no modifications other than selecting a stacked header over the navbar/main menu in the customizer.

The #B and #C images are only Photoshop mock-ups made by me to show you what I’d like to do… these are future modifications under consideration that don’t currently exist on my website.

Do you still need to see the website?

Can these changes be made and if so how?

Thanks

[ajonesx]

Ooops… didn’t see your extensive reply that just came in Lily! Will work with this tomorrow and will try to wrap my head around it.

Thanks a lot.

[Rad]

You’re welcome and good luck! Let us know 😉

[Author]

Posts