Archived topic

remove scroll left sidebar

13 replies · Started by Oscar on July 18, 2019

Viewing posts 1–14 of 14

July 18, 2019 at 10:13 am #961366

Hi, how can I remove the scroll from the left sidebar?

July 18, 2019 at 11:59 am #961417

Hi there,

Are you referring to the header on the left?

I don't see a scroll?
https://www.screencast.com/t/VQiIl5UyNx

Let me know :)

July 18, 2019 at 1:06 pm #961453

Yes, the header on th left...a scroll is displayed in my browser...

Also, how can I do so that the widget text of "CONTACT" on mobile is displayed in the footer of the page

July 18, 2019 at 5:59 pm #961563

Hi there,

The scroll bar is necessary if you want users to be able to see the content at the bottom of your sidebar.

However, you can remove it like this:

.site-header {
    overflow: hidden;
}

Let me know :)

July 19, 2019 at 5:54 pm #962329

Hi Tom

I will try to explain better what I need :)

I have this site http://dosamigosfincadecafe.com/ with the main menu on the left sidebar and a widget of html text at the bottom which shows some contact details.

I'd like to know how I can make this widget show up at the bottom of the screen when the site is seen on mobile devices.

July 20, 2019 at 8:19 pm #963083

Hi there,

Sorry for not getting back to you sooner.

So would these widgets be fixed to the bottom of the screen on mobile? Or would they be in the footer once you scrolled down?

I'm not sure if you'll have enough screen space to fix them to the bottom of the screen, especially on smaller phones.

Let me know :)

July 21, 2019 at 4:35 pm #963706

Hi, thanks for you response.

Regarding your question: Yes, I need that in big screens the menu and the contact widget remain on the left and in small screens (cell phones) the content of the widget is shown below the image.

July 22, 2019 at 9:52 am #964328

Did you reset your site? I'm not seeing the same layout I was seeing before.

Let me know :)

July 22, 2019 at 1:08 pm #964468

Hi Tom, Sorry for not warning, the site was a while offline, right now is available at dosamigosfincadecafe.com and with the same layout.

July 22, 2019 at 6:08 pm #964607

Hi there,

What if you copied the widgets into the Footer Widget area, then added this CSS?:

.footer-widgets {
    display: none;
}

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }

    .footer-widgets {
        display: block;
    }
}

July 23, 2019 at 10:41 am #965273

Hi Tom, thnaks for you support, you are the best

Adding the CSS that you give me does not achieve what I need...

If it helps, I share with you the CSS I have in the "additional CSS tab"...

`.site-info{display: none;}

.one-container .inside-right-sidebar, .one-container .inside-left-sidebar{
text-align: center;
}

/*Contact Form Styles */

/* GeneratePress Site CSS */ @media (min-width: 1000px)
{body {
padding: 0 0 0;
margin-left: 300px;}

.site-header {
position: fixed;
left: 0;
top: 0;
width: 300px;
z-index: 300;
height: 100%;
overflow: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease;
}

.admin-bar .site-header {
top: 32px;
}

.site-header .main-navigation li {
float: none;
}

}

.inside-header {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}

.site-branding,
.site-logo {
order: 1;
}

.header-widget {
order: 3;
}

.nav-float-right .inside-header .main-navigation {
order: 2;
float: none;
margin-top: 30px;
margin-bottom: 50px;
}

.nav-float-right .header-widget {
float: none;
top: auto;
max-width: 100%;
}

#menu-social-sider li {
display: inline-block;
margin: 0 10px;
}

.dropdown-click .site-header .main-navigation ul ul {
position: relative;
}

a.button,
a.button:visited,
button,
input[type="submit"] {
border-width: 1px;
border-style: solid;
border-color: inherit;
}

.mc4wp-form-fields input {
margin-bottom: 10px;
width: 100%;
text-align: center;
}

.single .entry-header::after,
.page .entry-header::after{
border-bottom: 1px solid #000;
content: "";
display: block;
margin-bottom: 40px;
padding-bottom: 40px;
width: 2.5%;
}

.main-navigation.toggled .main-nav li {
text-align: center !important;
}

::-webkit-input-placeholder { text-transform: uppercase;
font-size: 14px;
}

::-moz-placeholder {
text-transform: uppercase;
font-size: 14px;
}

:-ms-input-placeholder {
text-transform: uppercase;
font-size: 14px;
}

:-moz-placeholder {
text-transform: uppercase;
font-size: 14px;
}

@media (max-width: 768px) {
.separate-containers .site-main {
margin-top: 20px;
margin-bottom: 0;
}

.post {
margin-bottom: 20px;
}

.inside-header {
padding: 30px;
}

html:not(.mobile-menu-open) .header-widget {
display: none;
}

.nav-float-right .inside-header .main-navigation {
margin-top: 0;
}

.nav-float-right .inside-header .main-navigation:not(.toggled) {
margin-bottom: 0;
}
}
.header-widget{
width: 210px;
padding-bottom: 10px;
padding-top: 300px;

}
/* GeneratePress Site CSS */ @media (min-width: 1000px) {
body {
padding: 0px 0px 0px;
margin-left: 300px;
}

.admin-bar .site-header {
top: 32px;
}

.site-header .main-navigation li {
float: none;
}
}

.inside-header {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}

.site-branding,
.site-logo {
order: 1;
}

.header-widget {
order: 3;
}

.nav-float-right .inside-header .main-navigation {
order: 2;
float: none;
margin-top: 30px;
margin-bottom: 0px;
}