• Closed
  • Brian Nordstrom
    Spectator
    July 9, 2015 at 1:17 pm #18725

    Good Morning,

    I have one issue and one question:

    We recently upgrade to the pro version of evolve and are using the bootstrap slider on the front page. After upgrading, we noticed that the left and right arrows for the slider don’t line up with the title strip and after about 5 seconds they move to the top of the page. (see http://lionrinnovations.com/wp/). Any ideas why? (We are also currently using Popups – WordPress Popup Version 1.3.3 By Damian Logghe plugin if that matters)

    Also along the same lines, on the mobile view, is it possible to have the title strip be at the bottom of the slider instead of the center? Also, since the buttons and description text don’t show on the mobile, can we make the title into a link?

    Thanks for any feedback

    Brian

    Imran
    Spectator
    Posts: 402
    July 9, 2015 at 5:26 pm #18726

    Hi there,

    Thanks for writing in,

    If you wish to get the arrows again activated, so you can add this following code under Appearance > Theme Options > custom CSS:

    #bootstrap-slider img {
    top: 200px !important;
    }

    Second, if you want to have your title on the bottom over mobile devices, so you can add the following code in your customizer:

    @media (max-width: 768px) {
    .da-slide h2, #bootstrap-slider .carousel-caption h2 {
    position: relative;
    top: 47px;
    }

    .da-slide h2, #bootstrap-slider .carousel-caption {
    background: none;
    }
    }

    Thirdly, instead of making your title to a link, you can have your button back on mobile devices. If you want to activate the button so you don’t need the code for “title at bottom” and so the following code which you can add in your custom CSS:

    @media (max-width: 520px) {
    #bootstrap-slider .carousel-caption .button {
    display: inline-block !important;
    width: 60%;
    margin: 0 auto;
    }
    }

    Hope this helps!

    Thanks.

    Brian Nordstrom
    Spectator
    Posts: 2
    July 10, 2015 at 12:07 pm #18747

    Thanks, that worked for the arrows and the title bar. For the 3rd option, since the mobile view is so much smaller, we still would like for most of the slider images to show through so adding back in the buttons takes up too much space. Is it possible to make the title strip text into a link?

    Also I need to be able to set the header image height to 125 for the regular site and 200 for the mobile view. Can I add in some code to specify them separately?

    Brian Nordstrom
    Spectator
    Posts: 2
    July 10, 2015 at 1:58 pm #18748

    Actually what it looks like is happening is on the mobile view the menu-container is overlapping the container-header. Is there a way to make sure that the menu-container stays below the container-header?

    Imran
    Spectator
    Posts: 402
    July 24, 2015 at 3:51 pm #19150

    Hi Brian,

    Upon checking, it seems that the titles of the bootstrap slider are already running as links on small devices. As for the menu-container, so it seems not to be overlapping the container-header and is placed right under it. Also not affecting any other part.

    In regard of header image, if you want to achieve something like this: http://prntscr.com/7wgg4h so you can try adding the following code under your custom CSS:

    @media only screen and (min-width: 768px) {
    .header {
    min-height: 165px !important;
    }

    #logo-image {
    height: 125px;
    }
    }

    Thanks.