Support » Theme: OceanWP » Center my footer and make it sticky when scrolling.

  • astephmusic

    (@astephmusic)


    Hi OceanWP,
    I use your theme and it’s great. How do i center my footer information and make it one line(as opposed to two lines like it is right now?) I also want it to be a sticky footer (that is, when you scroll through the page the footer is always within view on the bottom for the user looking at my webpage). I’ve yet to find a plugin that works with this theme for those both these needs so maybe a code you could provide for all this to add in additional CSS field of customize wordpress page? I use mega max menu plugin to customize my footer and they said you’d provide me this info. Thanks.

    (also, i use myStickymenu plugin for sticky header, just in case this effects anything for the footer. Also, i have an scroll-to-id link on my footer for when you click on the footer for my one page website if this affects anything. Thanks!)

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Amit Singh

    (@apprimit)

    Hello,

    Try to add the code in the custom CSS section of the customizer.

    div#footer-bottom-menu {
        width: 100% !important;
    }
    #mega-menu-wrap-footer_menu {
        text-align: center;
    }
    #footer-bottom, #footer-bottom p {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    I have added code to make footer fixed but for the additional options, you can try Ocean Sticky Footer plugin.

    astephmusic

    (@astephmusic)

    Wow thanks so much!

    Amit Singh

    (@apprimit)

    You’re welcome!

    astephmusic

    (@astephmusic)

    Only thing is with this is that the footer doesn’t show as 1 line in mobile mode or tablet mode. Can you send me something more to add to the css to fix that so that it is consistently a one line footer on all devices? Also on tablet the footer is only visible then sticky when you scroll all the way to the bottom of the page, and is not coming up like on mobile and desktop version on the first load of the homepage, can you send a fix for that too? Also my main menu turns into a dropdown box menu on tablet, not the standard one line across menu like on the desktop. Can you send me something to fix that as well? I reduced responsive breakpoint to 0 in mega max menu for mobile, but that did nothing for the menu. For mobile i want to customize the dropdown menu to be my sites colors, can you send mer that addition as well? Thanks!

    astephmusic

    (@astephmusic)

    Also the flyout menu for mobile and tablet, how can i edit those colors? I don’t want it see-through black i’d like it to be see-through white and word font this specific blue: #00098c . Can you help with this too? That’s if making the menu without a flyout hamburger icon menu is easier in mobile and tablet for the OceanWP theme. Also can you center the menu hamburger icon for tablet? It’s centered on mobile device though. Thanks a lot man let me know!

    Amit Singh

    (@apprimit)

    For the footer one-line text in mobile view, add the code in the custom CSS section of the customizer.

    @media only screen and (max-width: 768px) {
    #mega-menu-wrap-footer_menu #mega-menu-footer_menu > li.mega-menu-item > a.mega-menu-link {
    font-size:10px;
    }
    }

    Adjust the font size as per your need. But it will make it too small because your footer text is too long to display in one line in the mobile device.
    You can also use media queries to set the font size according to the device – Media Queries

    For the menu background color and link color –

    go to Customize > header > mobile menu and change the background color, menu color etc.

    Center menu in mobile –

    @media only screen and (max-width: 959px) {
    body.default-breakpoint .oceanwp-mobile-menu-icon {
        text-align: center;
    } 
    }
    #site-header.top-header .header-top .left {
        float: none;
    }

    Hope it will help you.

    Awesome yeah you did! Just one issue: when you open the tablet version only(EVERY other platform is good with this, just not on tablet) the footer isn’t in sight at the bottom sticking when someone first loads my site at the homepage, but it sticks at the bottom and only reveals itself and sticky when you scroll all the way down to the bottom of the screen then scroll up. Also i think the css you provided me is great, but it reduced the length of my webpage, and i needed that space at the bottom to properly separate my sections. Can you fix both these things, including giving back my one page webpage more space on the bottom and a longer webpage? Maybe the footer location decreased the length of my webpage? Thanks very much this has been so helpful so far!!

    Add the below code in the custom CSS section of the customizer.

    #main {
        padding-bottom: 50px;
    }

    If it will not work then try with important. See below

    #main {
        padding-bottom: 50px !important;
    }

    Hey sadly both of those codes made it so that on tablet the footer is sticky, but only when you scroll down all the way, not right when you open my website. Can you send something else to make that sticky footer appear as soon as you enter the site? (mobile and desktop it works on)

    Hello,

    It is working fine. Can you share a screenshot about the issue?

    As you can see in the video here provided, if previewing how my website will look if looking at it via tablet, you’ll see the sticky footer won’t show up until scrolling to the bottom of the page. It works for all other devices though. Does this not happen when you try my website out on an actual tablet from your end? Thanks, other than this problem, everything is perfect, let me knwo what’s up. Great customer service here! :). Video here: https://www.dropbox.com/s/6ah8246o5xurogu/Screen%20Recording%20for%20wordpress.mov?dl=0

    When we finish up here i’m giving OceanWP the BEST rating!

    Also any way to make the page a little longer? As you can see, the space between the top of the webpage and “Contact Us” page is too big. If i narrow it, the text boxes from the section above it (Paul Products) will be in the frame! Cool then after this it’s all good! Please let me know how to fix these two things 🙂

    So i fixed the page and made it longer no problem there now! Just still need help with this issue i posted above and that’s IT:

    As you can see in the video here provided, if previewing how my website will look if looking at it via tablet, you’ll see the sticky footer won’t show up until scrolling to the bottom of the page. It works for all other devices though. Does this not happen when you try my website out on an actual tablet from your end? Thanks, other than this problem, everything is perfect, let me knwo what’s up. Great customer service here! :). Video here: https://www.dropbox.com/s/6ah8246o5xurogu/Screen%20Recording%20for%20wordpress.mov?dl=0

    Hello,

    I recommend you to test the footer on a real device. If it will not work then let me know.

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.