How to move elements with Upfront?

On my desktop site, the navigation bar is not at the top. However, on the mobile site, I need to navigation bar at the top, however, it seems as if I can not move it. Also, the "Triggered" Navigation button doesn't seem to be working, it still displays the full menu.

Also, I need to have different wording on the mobile site then on the desktop site to make it more mobile friendly. Is this possible with Upfront? I tried changing the text in the mobile responsive mode, but it changed the text in the desktop site as well.

For comparison....kothandgregory.com is the site I am mimicking (look at it on mobile) and then look at their new site on mobile (kothlaw.com)

Lastly, on the menu on the drop down for "Practice Areas", how can I get the text on one line for "HealthCare Revenue Cycle", "Divorce and Family Law:, and "Worker's Compensation"??

  • Kasia Swiderska

    Hello Blake,

    It is possible to reorder elements on responsive mode - but elements (as described here https://premium.wpmudev.org/forums/topic/is-there-a-way-to-change-the-order-things-are-displayed-on-different-devices ), not regions - and from what I see your navigation bar is separate region so it cannot be moved.

    I checked your mobile menu and in emulator mode it works fine but on real mobile it stops working. So there is definitely something wrong there.
    Would you mind allowing support access so we can have a closer look at this?
    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    kind regards,
    Kasia

  • Nithin

    Hi Blake,

    Hope you are doing good today.

    Is there anyway to get the navigation bar to the top? How can I change it from a region to an element?

    The workaround is, that you'll have to have a single region, and add the rest of the sections as elements in it. So that you could arrange the navigation bar to the top in the mobile view.

    Regarding menu not working in real mobile view, as mentioned by Kasia, it seems like the issue is specific to IPhone 5. Other than that, it seems to work fine in IPhone 6,7, and Android devices. I have pinged the developer regarding this specific issue, and will keep you updated.

    Also, I need to have different wording on the mobile site then on the desktop site to make it more mobile friendly. Is this possible with Upfront? I tried changing the text in the mobile responsive mode, but it changed the text in the desktop site as well.

    It's a single common element, so if you edit the text in mobile, the changes will reflect the same in Desktop view. What you could do is add two text elements, one with the text for mobile, and another for desktop. Once you add it, you can hide the specific element in mobile view, and Desktop view of Upfront.

    You can hide the elements in mobile view, by clicking the eye symbol. To hide the elements in Desktop view would require custom CSS code. Once you have finished with adding the elements, we could give the necessary CSS code to hide it in Desktop view.

    Lastly, on the menu on the drop down for "Practice Areas", how can I get the text on one line for "HealthCare Revenue Cycle", "Divorce and Family Law:, and "Worker's Compensation"??

    Could you please try the following CSS, and check whether it works fine.

    div.upfront-navigation div[data-style=horizontal] ul.sub-menu {
    	width: 250px;
    }

    Please add the above CSS in the Global Theme CSS section, and check whether it works fine. You'll have to clear your cache, in order to see the changes.

    Please let us know how that goes, so that we could give a closer look. Have a nice day.

    Kind Regards,
    Nithin

    • Blake

      Thank you for the reply!

      The workaround is, that you'll have to have a single region, and add the rest of the sections as elements in it. So that you could arrange the navigation bar to the top in the mobile view.

      So would I have to redo the entire site to put it into 1 region? Or, would putting a navigation menu at the top and hiding it with custom CSS code on the desktop be a better work around?

      Also, on mobile site with the triggered navigation bar, it seems as if even though I have the alignment on "left" it displays it on the right?

      And thanks for the css code for expanding the width of it. It worked!

  • Nithin

    Hi Blake,

    Hope you are doing good today.

    So would I have to redo the entire site to put it into 1 region? Or, would putting a navigation menu at the top and hiding it with custom CSS code on the desktop be a better work around?

    Yes, the easiest would be to hide using custom CSS. However, the recommend method would be to put the elements into 1 region, since the menus will be still present in html markup, and it won't be a good design practice. Please let us know how you are looking to implement this.

    Also, on mobile site with the triggered navigation bar, it seems as if even though I have the alignment on "left" it displays it on the right?

    That's odd on how it's aligned. Did you make any custom changes to the menu? Could you please temporarily disable Hummingbird minification, and the cache, do you have server cache enabled? I was able to notice, even after deactivating the hummingbird plugin, the minification was still present when logged out(even after clearing cache). I would like to check with the cache, and minification disabled in order to provide a fix.

    Please let us know once you have made the changes, so that we could help get this resolved. Have a nice day.

    Kind Regards,
    Nithin

  • Kasia Swiderska

    Hello Blake,

    So I moved all the regions into one. But, the problem I am coming into now is that I can not get the navigation bar the color I wan clear across the page

    This is because only region can have that type of background. But if you would use region then they cannot be moved as elements are. Please try this CSS to add background under the navigation

    .upfront #upfront-region-container-header > .upfront-region-container-bg:after {
    content: ' ';
        background-color: #be9c3c;
        width: 100%;
        height: 78px;
        display: block;
        position: absolute;
        bottom: 0;
    }

    I also can not still seem to move regions in the mobile editor.

    It looks like that on your site navigation cannot be moved also in desktop mode to the top of the header. This is strange because I tested moving elements in Scribe theme on my site and I could move them freely.
    I'm sending message to developer to check what is going on there and why its not working as suppose to.

    kind regards,
    Kasia

  • Blake

    I have added the code, but now it does not look right as shown in the picture.

    Please let me know what the developer says. I have a client waiting on this.

    Also, on the mobile site, even though I have the two blue bars hidden, they are still showing on the mobile view.

    Still having the issue with the Triggered Navigation option showing on the left, even though I have it set to be on the right.

  • Kasia Swiderska

    Hello Blake,

    Change that code to

    .upfront #upfront-region-container-header > .upfront-region-container-bg:after {
    content: ' ';
        background-color: #be9c3c;
        width: 100%;
        height: 85px;
        display: block;
        position: absolute;
        bottom: 0;
    }

    I change height: 85px; to higher value so it will cover the whole menu.

    Still having the issue with the Triggered Navigation option showing on the left, even though I have it set to be on the right.

    I'm checking now site on iphone and navigation is on the right, not left. Please see screenshot from my phone

    Also, on the mobile site, even though I have the two blue bars hidden, they are still showing on the mobile view.

    You hidden elements on region not region. When you are in mobile view edit region you want to hide and you will see it has own "eye" icon.

    that one will hide whole blue bar.

    I'm still waiting for developers response, they are not online at the moment.

    kind regards,
    Kasia