Docs

[Tobias A]

Hi there,
1. Is it possible to switch from stacked header style on desktops to inline header style on mobile devices?
The mobile button should appear on the right side and the logo on the left side as shown in images below.

Here´s the link to my website: http://hclauchringen.de/
2. is it possible to load the background image NOT on mobile devices? (to reduce page size for mobile users)

Hope on your help. All other questions i could answer with help of this excellent forum 🙂 thx for that…
Tobias

[Paul R]

Hi Tobias,

Thanks for writing in!

1. You can try the code below.

First you need to remove extra space on your logo image.
http://screencast.com/t/VXEMqo6mMgVj

Then you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px){
   .masthead.masthead-stacked {
        background:##0000ff;
    }

   .masthead.masthead-stacked .x-logobar {
        float:left;
        margin-left:20px;
        width:72px;
        background:##0000ff !important;
    }

    .masthead.masthead-stacked .x-navbar-wrap {
        float:right;
        margin-right: 20px;
        margin-top:14px;
    }

    .x-brand img {
        width:72px;
    }
}

2. I am not sure which background are you referring to.

Hope that helps.

[Tobias A]

Hi,
many thanks for your reply. Unfortunately, the code has not conceded the desired effect. The header is cut off in two parts and splitted (see image).

You can see the problem also on my website. I will let the website with the bug online for a day, so you can see which problems I mean.

With background I meant the main background which is adjustable with the customizer (see image).

Hope you can help me.

[Christian]

Hey Tobias,

Sorry for the syntax error. Please change the code

.masthead.masthead-stacked {
        background:##0000ff;
}

to

.masthead.masthead-stacked {
background: blue;
height: 100%;
display: inline-block;
width: 100%;
margin-bottom: -6px;
}

Regarding the background, that is not currently possible.

Hope that helps. 🙂

[Tobias A]

Hi,
great that code works perfect.
But now there is (hopefully) a last small bug: When the menu collapse it move already back in stacked style. It would be nice if the menu collapse as in demo renew Demo 2 http://theme.co/x/demo/renew/2/
Do you have a solution for that issue?
Many thanks…

[Christian]

Hey Tobias,

Please give us more details about your issue. Upon checking your website, the CSS modification works fine.

Thanks.

[Tobias A]

Hi,
hope these three images explain what issue I mean:

When menu is closed everything is fine.

First click on the mobile menu button generates that the button move a bit left, and the menu items below do not use the whole width.

By clicking on a submenu item the whole menu go back in stacked style. And also the menu items do not use the whole width.

Thanks.

[Paul R]

Hi Tobias,

You can try the code below.

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

@media (max-width: 979px) {
.masthead-stacked .x-btn-navbar {
    position:absolute;
    right:20px;
    top:-70px;
}

.x-navbar-wrap .x-container-fluid.width {
    width:100%;
}

.masthead.masthead-stacked .x-navbar-wrap {
    width:100%;
    margin-right:0;
}

.x-navbar-inner {
   min-height:0;
}
}

[amnesico]

Hi,
I just used the code above to have the inline header for mobile, it worked 🙂
Here: http://www.cinencuentro.com/

Now I have two more requests, also for the mobile template:
1. How can I get the header to stay on top when you scroll down? It usually should be a reduced, small version of the header. Can I get that?

2. How can I control which elements from my desktop template to appear or not on the mobile version? For instance, I’d like to hide some elements from my sidebar.

One more thing on the mobile template: there seems to be a bug, on the header area, when I do the gesture of horizontal slide, the page scrolls horizontally to a gray area.

[Rue Nel]

Hello There,

Thanks for updating the thread.

@media (max-width:767px) {
    .x-brand.img {
        max-width: 220px;
    }

    .x-navbar.x-navbar-fixed-top {
        position: fixed
    }
}

For your 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.

Thanks for understanding.

Thanks!

[Author]

Posts