[Resolved] remove scroll left sidebar

Home Forums Support remove scroll left sidebar

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #961366
    Oscar

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

    #961417
    Leo
    Staff
    Customer Support

    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 🙂

    #961453
    Oscar

    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

    #961563
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #962329
    Oscar

    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.

    #963083
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #963706
    Oscar

    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.

    #964328
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #964468
    Oscar

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

    #964607
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #965273
    Oscar

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

    .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: 0px;
    }

    .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;
    }
    } /* End GeneratePress Site CSS */

    .footer-widgets {
    display: none;
    }


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

    .footer-widgets {
    display: block;
    }
    }

    The theme I chose for this site (if I remember correctly) I took it from the site library… it has the name “sider”.

    #965477
    Tom
    Lead Developer
    Lead Developer

    What exactly didn’t work about it? Did it do anything at all?

    Did you copy the widgets to the Footer Widgets area?

    Let me know 🙂

    #966137
    Oscar

    Hi Tom, sorry for the confusion!
    With the CSS you gave me it works perfectly!
    Thank you so much for your help!

    #966434
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.