Well that’s not it… The emulator actually worked fine yesterday, but not the page on my smartphone..
In my previous reply I provided you with a http-link to a image which I screen captured from my Samsung S5 -which shows the problem…

When I press to mobile menu so it opens, the image/logo along with the header content jumps to the right.
BUT if I click a menu with a sublink, it corrects it self and moves back to left (where it’s suppose to be) just as it does when I click to close the menu…

My opinion is that the problem therfor should be connected in some way, to the logo/image or the header information as all of this started from the moment when I added the code provided from here:
https://kriesi.at/support/topic/change-order-of-header-elements-i-mobile-view/

Thanks!

• This reply was modified 9 years, 9 months ago by Sunique.

Rikard, I thank you for the answer, but frequently you answer us without read the question with attention. I’m little bit upset for this.
Very long time to have an answer, more than 5 hours and in the meanwhile I look a lot of question answered before mine, even if that questions have been made after mine.
Ok, go on.
I wrote that I need to include MY OWN MAP inside a page. This mean I already have a map, with markers and so on, that I have created a lot of time ago. I can reach this map in “my maps” on google.
The Google Map element under Media Elements in the Layout Builder, that you suggested me, is a tool useful to show a map with a precise coordinates. This is another story, not mine.
You can look at this map? https://drive.google.com/open?id=1V6gKO_ZdXRtKeQYenij37EBKXw0&usp=sharing
Ok, I simply would like to show it in a page, this is all. Very simple!
Sorry if I was a little biy grumpy, but please comprehend me, you cannot go speedly to answer a lot of topics with few people, answering “casual” answers, without reading deeply the question I made.
Thank you.
I hope not to wait for another five hours to have an answer.
Roberto

in private content the temporary login

Christophe

Andy,
When I add that in, it does do what you see on the mobile, but then on the desktop it displays like this:

I have taken out the code for now, but below I have given you admin creds to go check yourself if you wish.
Just to refresh as this has been a long thread and is combining with some other customizations, here is what I am trying to do:
1. I am trying to have the header image/logo appear on the home page but none of the sub pages.
2. On the home screen I have the two widget boxes that display inline on full screens but then display in list when on mobile screen.
3. On all sub-pages, I do not need to see these widgets and also I do not want to see the logo or header background image.
4. On all sub-pages I do want just the nav bar strip to be sticky.

I currently have the following bits of Quick CSS that are involved in this as follows:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
margin-top:20px!important;
color:#ffffff!important;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 50px;
}

.container.av-logo-container, #text-5, #text-6 {
display: none;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px;
}

.page-id-734 .container.av-logo-container, .page-id-734 #text-5 {
display: block;
}

#text-5 {
left: 65% !important;
}

.page-id-734 #text-6 {
display: block;
}

#text-6 {
left: 85% !important;
transform: translate(100%);
}

div#text-5 {
top: 83px !important;
left: 125px !important;
}

div#text-6 {
top: 207px !important;
left: 125px !important;
}

@media only screen and (max-width: 767px) {
header#header {
height: 400px;
}
}

@media only screen and (max-width: 767px) {
.responsive .logo img {
max-height: 60px;
}
}

Also, on the Header > Header Behavior I have the Stick Menu box checked (all other options unchecked)
Sorry if this is getting convoluted. I do appreciate all your help.

Actually one more to optimize in core code – Thank you for removing unnecessary characters from the core code and images files! :)

Optimize images
Properly formatting and compressing images can save many bytes of data.
Optimize the following images to reduce their size by 9.8KiB (44% reduction).
Losslessly compressing wp-content/themes/enfold/images/background-images/grain_top.png could save 9.8KiB (44% reduction).

Thank you.

I did as you asked and I cleared my browser cache and it still is doing it on my Note 4 in portrait mode. We also tested it on a iphone. It still was doing the same thing.

So I was looking at the toggle/accordion box and it was doing what we needed for these boxes. So I made some css experiments and finally got something so its at least decent looking across all browsers/sizes and squishing.

This was the code for it and even though it says div there I used spans around my actual special headings.

div .heading-border{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #666666;
text-shadow: 1px 1px 5px #ffffff !important;
}

div .heading-border2{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #FFFFFF;
box-shadow: 1px 1px 5px #1e4371 !important;
}

@media only screen and (max-width:1064px) and (min-width: 320px) {
div .heading-border{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #666666;
text-shadow: 1px 1px 5px #ffffff !important;
width: 100%;
    float: left;
    display: block;
    margin: 0 0 -2px 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: -2px;
    margin-left: 0px;
    padding-bottom: 1px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

div .heading-border2{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #FFFFFF;
box-shadow: 1px 1px 5px #1e4371 !important;
width: 100%;
    /*float: left;*/
    display: block;
    margin: 0 0 -2px 0;
    margin-top: 0px;
    margin-right::0px;
    margin-bottom: -2px;
    margin-left: 0px;
    padding-bottom: 1px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}
}

@media only screen and (max-width: 320px) {
.av-special-heading-tag {
    font-size: 2.5vh !important;
}

}

Thank you for trying to help I appreciate it.