[Resolved] GP Child theme – slider in website header

Home Forums Support [Resolved] GP Child theme – slider in website header

Home Forums Support GP Child theme – slider in website header

  • This topic has 30 replies, 4 voices, and was last updated 6 years ago by Tom.
Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #135699
    Tom
    Lead Developer
    Lead Developer

    Can you try pacing it in the before header content hook?

    #135700
    mapsarska

    Yes of course it is now in before header and i ofcourse mark execute php

    #135702
    Tom
    Lead Developer
    Lead Developer

    Try this:

    body .metaslider {
    	position: absolute;
    	top: 0;
    	left: 600px;
    	width: 44%;
    	max-width: 100% !important;
    	z-index: 1;
    }
    
    .site-branding,
    .header-widget {
    	position: relative;
    	z-index: 5;
            max-width: 50%;
    }
    #135703
    mapsarska

    Ok, now header wigdet is working, but we have a big gap between menu and slider can we avoid it?

    #135710
    mapsarska

    Ok. i get rid of the gap by making slider little bigger

    
    body .metaslider {
    	position: absolute;
    	top: 0;
    	left: 550px;
    	width: 51%;
    	max-width: 100% !important;
    	z-index: 1;
    }
    
    .site-branding,
    .header-widget {
    	position: relative;
    	z-index: 5;
    	max-width: 50%;
    }
    

    On desktop looking great and work fine, but it is not responsive πŸ™
    On mobile slider not visible when page loads, you have to swipe right and it is very small on top right corner, outside the screen.
    And now with header widget set to 50%, social icons loads not in line but strange using very small part of screen, i will experiment a little with your CSS Tom, but i dont know anything about it, only can write in html…

    #135716
    mapsarska

    Also i now checked few computers in my office friends and their desktop computers show page very different according to ressolution.

    My computer 1920 x 1080
    http://images57.fotosik.pl/1764/462c80f420fe2cc7med.jpg

    1280 x 1024
    http://images58.fotosik.pl/1767/c8e5f77650fd7b0amed.jpg

    1024 x 768
    http://images56.fotosik.pl/1765/9ca983f4d0985bfcmed.jpg

    HTC Desire 816 5,5″ screen
    youtube video https://youtu.be/OpYe61asO1o

    #135782
    mapsarska

    Only way to make it responsive is to have relative positioning?
    Dont know much about css πŸ™

    #135847
    Tom
    Lead Developer
    Lead Developer

    Looks like you’ve tweaked some of that CSS to make it look like the above.

    Making is responsive is definitely an issue – we’re doing something to the slider that it isn’t really developed to do.

    You might want to contact those developers and see if they’ve helped anyone set the slider to the background of an element – they may have a better, responsive option.

    #135898
    bdbrown

    What happens if you move the metaslider shortcode to the “Before Header Content” hook and remove the metaslider css? It should be responsive by default. Then we can work on positioning the site branding and widget where you want them to go.

    #135995
    mapsarska

    @bdbrown Ok CSS deleted. Slider php hooked in “before header content” with execute php checkbox checked

    #136114
    bdbrown

    Give this a try and see how it works:

    /* resize metaslider */
    .inside-header .metaslider {
        width: 75%;
        max-width: 925px
    }
    
    /* remove extra space around slider */
    .inside-header {
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* move social widget up on top of slider */
    .header-widget {
        margin-top: -100px;
    }
    
    /* move site title & tagline up next to slider */
    .site-branding {
        margin: -110px 0 34px -10px;
        position: relative;
        z-index: 99;
    }
    
    /* move elements below slider for mobile view */
    @media screen and (max-width: 768px) {
        .site-branding {
            margin-top: -80px;
            float: left;
        }
        .header-widget {
            margin-top: 20px;
        }
    }
    
    #136628
    mapsarska

    Thx, you check the look when have time.
    Unfourtunaltelly it is not how should be.
    – There is still some space below slider
    – header widget lightway social icons not working
    + site title in header clickable
    – mobile view tested on 2 mobiles i have Z1 5″ and HTC 816- 5,5″ very small slider,
    Social icons are bigger πŸ™

    Im thinking of returning to static picture in header background…

    #136633
    Tom
    Lead Developer
    Lead Developer

    Did a little research on this – maybe this plugin will help?: https://wordpress.org/plugins/jellyfish-backdrop/

    In the “Containing element” option you could put .site-header

    #136646
    mapsarska

    Thanks Tom.
    I installed the plugin.
    But have no idea how to use it with slider.
    I deleted the CSS and disable the hook for it.

    But i can only add one file from media gallery, have no idea how to use it with the slider

    #136650
    mapsarska

    Ok, i have red hos to do it -> http://strawberryjellyfish.com/wordpress-plugins/jellyfish-backdrop/

    But in my situation if i want to use it in .site-header, how can i create a slideshow using this plugin? If only shows slideshow options on site elements which are marked in Setting page.
    I must experiment a little.

    Its working if i created new page-> http://www.adlerpneumatyka.pl/header-slideshow-test/

    But this have to be added to every page i have now? Not working on any other page only on the one i tested it πŸ™

Viewing 15 posts - 16 through 30 (of 31 total)
  • You must be logged in to reply to this topic.