Docs

[gisela]

Hi!

I’m building my site: http://www.giselallimona.com and I have a problem with tablet and mobile settings. The side bar is placed at the bottom, after the content. I will like that the side bar to be displayed at the top, between the header and the content.

Any way to achieve that?

THanks!

[Jade]

Hi Gisela,

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

@media (max-width: 979px) {
    .x-container.max {
        display: -webkit-box;
        display: -moz-box;
        display: box;

        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }

    .x-main.right {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    aside.x-sidebar.left {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;    
        margin-bottom: 3.5em;
    }
}

Hope this helps.

[gisela]

Thanks. Now the menu is at he beggining, but the header is at the end overlaped with the content.

I need:

1. header
2. sidebar (menu)
3. content
4. footer

[Lely]

Hi Gisela,

In that case, we can use your initial page title instead. Please note that by structure your Header is inside your main content. Your main page is divided in two columns – Sidebar and Content. Header is inside the content. On mobile view, it would be better to use your landmark header. Update above CSS to this:

@media (max-width: 979px) {
    .x-container.max {
        display: -webkit-box;
        display: -moz-box;
        display: box;

        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }

    .x-main.right {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    aside.x-sidebar.left {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;    
        margin-bottom: 3.5em;
    }
    .x-header-landmark {
       display: block;

    } 
    .h-landmark, .entry-title.h-landmark{
       letter-spacing: 0.122em !important;
        font-size: 3.2em;
        font-weight: 700;
    }
   .x-breadcrumbs-wrap {
      display: none;
   }
   .h-custom-headline.titol {
    display: none;
   }
}

Hope this helps.

[gisela]

Thanks,

now the order is correct, but there is no header, not the home one neither. And I see the page title (“home”, “inici”…) at the beginning of each page, which is something that I will like to not see.

[gisela]

So, I can insert the home title on the top of the side bar and display it only on the mobile and tablet. I can do that with a plugin easy. The only thing that I need is that the page title is not displayed.

[Jade]

Hi Giesela,

Please update the previous code to:

@media (max-width: 979px) {
    .x-container.max {
        display: -webkit-box;
        display: -moz-box;
        display: box;

        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }

    .x-main.right {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    aside.x-sidebar.left {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;    
        margin-bottom: 3.5em;
    }
    .x-header-landmark {
       display: block;

    } 
    .h-landmark, .entry-title.h-landmark{
       letter-spacing: 0.122em !important;
        font-size: 3.2em;
        font-weight: 700;
    }
   .x-breadcrumbs-wrap,
   .h-landmark, .entry-title.h-landmark {
      display: none;
   }
   .h-custom-headline.titol {
    display: none;
   }
   
}

Hope this helps.

[gisela]

Still nothing on the header on mobile format, just a blank space. It’s possible to fill it with the header image or a custom one?

Thanks 🙂

[Lely]

Hi Gisela,

From previous CSS please update this part:

 .x-breadcrumbs-wrap,
   .h-landmark, .entry-title.h-landmark {
      display: none;
   }

To this:

 x-landmark-breadcrumbs-wrap .x-breadcrumbs-wrap {
    display: none !important;
}

Yes, using an image is possible using custom CSS.

[gisela]

Hi,

the header is still not displayed. Just in case if have not explained well, I would like that the “Gisela Llimona” text image to be displayed at the header.

[Rupok]

Hi there,

I can see this on header. Would you explain with a screenshot that what else you need to adjust now?

Cheers!

[Author]

Posts