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

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.

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.

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. 🙂

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

Thanks.

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.

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;
}
}

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.

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!