I have a series of pages utilizing a nav menu within a widget.
I’ve used this post to move the widget above the page content for mobile. https://theme.co/apex/forum/t/how-to-make-sidebar-appear-at-the-top-of-page-on-mobile/54458/2
However, I need the page title to always be at the top of the page, even on mobile. Can you assist with this?
Thank you
Hello @WaggingLabs,
Thanks for the details.
The code in the given thread will swap the order of the containers of the main content and the sidebar. Please be aware that the page titles are inside the main content which might not be possible if you want to display the page titles always on top. To assist you better with your issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.
Regards.
See secure note for the page I’m using to test a sidebar widget and credentials
The containers are currently only switching on tablet size, but I do want them to switch for all mobile devices.
Thanks
Hello @WaggingLabs,
To accomplish what you have in mind, you will need this custom Javascript. Please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)
(function($){
$(window).on('load resize', function(){
var W = $(window).width();
if ( W > 480 && W < 980 ) {
$('.page .entry-header').insertBefore('.x-main');
} else {
$('.page .entry-header').prependTo('.x-main .entry-wrap');
}
});
})(jQuery)
This code will only work for your pages.
Please let us know how it goes.
Thanks RueNel - This worked for tablet screen sizes. However, I can’t seem to get it to appear below the title and above content for mobile sizes.
Here’s my media query:
@media (max-width: 979px) {
.x-container {
display: flex;
flex-flow: column wrap;
}
.x-container .x-sidebar {
order: 1;
}
.x-container .x-main {
order: 2;
}
aside.x-sidebar.right {
margin-top: 30px;
}
}
Thank you very much
Hey @WaggingLabs,
The condition in Ruenel’s code (W > 480 && W < 980) applies for screen widths between 481 and 979. You can edit it to W < 980 only if you wish to apply 979 and below.
Please just be aware that the code is Javascript and Javascript errors coming from other plugins can keep this from working.
In case you’re not aware, in the future, a Layout Builder will be available so you’ll be able to build custom post layouts without coding.
Hope that helps.
Hi Christian,
Thanks for the prompt reply and additional information. I edited the JS per your recommendation and deactivated all plugins except Bellows (the accordion menu) just to test, but this has yet to work for me at smaller screen widths. It still works for tablet screens.
Can you check to see if my CSS is correct?
Thank you
Hi @WaggingLabs,
I checked it and it’s working fine, the title is moved outside the box container on mobile device. The only difference that I can see is, on mobile, the sidebar goes to the bottom instead on top like on tablets.
The CSS isn’t working due to broken CSS, please check this
@media only screen and (min-width:481px) {
.donations-mobile {
display: none;
}
.donations-desktop {
display: block;
}
@media screen and (min-width:0px) and (max-width:374px) {
.e1800-7 .x-menu .x-menu-inline {
display: none !important;
}
}
#loginButton {
margin: 0em 0em 0em 1em;
border-radius: 100em 100em 100em 100em;
font-size: .7em;
background-color: rgba(255, 254, 255, 0.2);
box-shadow: 0em 0.15em 0.65em 0em rgba(0, 0, 0, 0.25);
}
#loginButton.x-interactive {
background-color: rgb(255, 255, 255);
box-shadow: 0em 0.15em 0.65em 0em rgba(0, 0, 0, 0.25);
}
#loginButton .x-anchor-content {
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0.575em 0.85em 0.575em 0.85em;
}
#loginButton .x-anchor-text {
margin: 5px;
}
#loginButton .x-anchor-text-primary {
font-family: inherit;
font-size: 1em;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
margin-right: calc(0.1em * -1);
text-transform: uppercase;
color: rgb(255, 153, 51);
}
.widget {
text-shadow: 0 0 0;
}
.widget ul li a,
.widget ol li a {
border-bottom: 0px;
}
.widget ul,
.wigdet ol {
border: 0px;
border-radius: 0px;
box-shadow: 0 0 0;
}
@media (max-width:979px) {
.x-container {
display: flex;
flex-flow: column wrap;
}
.x-container .x-sidebar {
order: 1;
}
.x-container .x-main {
order: 2;
}
aside.x-sidebar.right {
margin-top: 30px;
}
}
The upper CSS has no closing bracket affecting other CSS added under it.
@media only screen and (min-width:481px) {
.donations-mobile {
display: none;
}
.donations-desktop {
display: block;
}
@media screen and (min-width:0px) and (max-width:374px) {
.e1800-7 .x-menu .x-menu-inline {
display: none !important;
}
}
It should be fixed by adding another close bracket like this
@media only screen and (min-width:481px) {
.donations-mobile {
display: none;
}
.donations-desktop {
display: block;
}
}
@media screen and (min-width:0px) and (max-width:374px) {
.e1800-7 .x-menu .x-menu-inline {
display: none !important;
}
}
Hence, you should have CSS similar to this
@media only screen and (min-width:481px) {
.donations-mobile {
display: none;
}
.donations-desktop {
display: block;
}
}
@media screen and (min-width:0px) and (max-width:374px) {
.e1800-7 .x-menu .x-menu-inline {
display: none !important;
}
}
#loginButton {
margin: 0em 0em 0em 1em;
border-radius: 100em 100em 100em 100em;
font-size: .7em;
background-color: rgba(255, 254, 255, 0.2);
box-shadow: 0em 0.15em 0.65em 0em rgba(0, 0, 0, 0.25);
}
#loginButton.x-interactive {
background-color: rgb(255, 255, 255);
box-shadow: 0em 0.15em 0.65em 0em rgba(0, 0, 0, 0.25);
}
#loginButton .x-anchor-content {
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0.575em 0.85em 0.575em 0.85em;
}
#loginButton .x-anchor-text {
margin: 5px;
}
#loginButton .x-anchor-text-primary {
font-family: inherit;
font-size: 1em;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
margin-right: calc(0.1em * -1);
text-transform: uppercase;
color: rgb(255, 153, 51);
}
.widget {
text-shadow: 0 0 0;
}
.widget ul li a,
.widget ol li a {
border-bottom: 0px;
}
.widget ul,
.wigdet ol {
border: 0px;
border-radius: 0px;
box-shadow: 0 0 0;
}
@media (max-width:979px) {
.x-container {
display: flex;
flex-flow: column wrap;
}
.x-container .x-sidebar {
order: 1;
}
.x-container .x-main {
order: 2;
}
aside.x-sidebar.right {
margin-top: 30px;
}
}
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.