[Support request] Help for "Navigator" (Flint Skin)

Home Forums Support [Support request] Help for "Navigator" (Flint Skin)

Home Forums Support Help for "Navigator" (Flint Skin)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #608424
    Oleg

    Hello guys,
    I’m using a cool site from the library: Navigator (Flint Skin). Please help me customize the left column. I need:
    1) to increase the column by a width of 10%
    2) place the widgets under the logo, not the bottom
    3) reduce paddings left and right for widgets

    My site: https://obuylov.ru/level2/

    1

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #608667
    David
    Staff
    Customer Support

    Hi there, glad to see you’re enjoying GP Sites!

    all of this requires adjustment (and addition) to the Additional CSS in the customiser. I have commented below each line that needs changing

    1. Change width of header:

    /* ------
    Fixed Header
    ------- */
    
    @media (min-width: 769px) {
    	body {
    		margin-left: 200px; /* This must match the site-header width */
    	}
    
    	.site-header {
    		position: fixed;
    		left: 0;
    		top: 0;
    		width: 200px; /* Increase width */
    		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;
    	}
    }

    2. Move Widgets under navigation.

    .header-widget {
    	-webkit-box-ordinal-group: 4;
    	    -ms-flex-order: 3;
    	        order: 3;
    	margin-top: auto; /* Replace Auto with PX's. eg margin-top: 30px; */
    	margin-bottom: 20px;
    }

    3. Add this CSS at the very bottom of the Additional CSS – adjust the % accordingly, the default is 50%:

    .inside-header .header-widget {
    	max-width: 60%;
    }
    #608677
    Oleg

    Many thanks, David!
    Two more questions, please.

    4) Align the logo to the left (as widgets).
    5) Add a shadow, as in the screenshot.

    1

    #608693
    David
    Staff
    Customer Support

    Both of these to be added to the Site Header CSS list above (1).

    1. Site logo – create a new rule within the Media Query:

    .site-logo {
    	margin-left: -45px;
    }

    2. For box shadow, add this property to the .site-header rule:

    box-shadow: 10px 0 10px 2px rgba(0,0,0,0.2);

    #609664
    Oleg

    David,
    one more (last) question.
    Is it possible to display the footer to the left bottom of the column?

    #609681
    David
    Staff
    Customer Support

    Hmmm, what are you going to be putting in the footer? Could you use another Widget in the header and we can force it to sit at the bottom of the column instead?

    #609695
    Oleg

    I want to place there copyright and year (information about the site). I remove the standart footer with CSS:

    .site-info {display:none;}

    If you think that you can do this with a widget, I agree 🙂

    #609711
    David
    Staff
    Customer Support

    OK, so we can create a short code with some PHP – heres how to, i recommend the Code Snippets plugin if your not using a child theme.

    https://docs.generatepress.com/article/adding-php/

    add_shortcode( 'db-copyright' , 'db_copyright_shortcode' );
    function db_copyright_shortcode() {
    	$current_year = date('Y');
    	$copy_sign = '©';
    	return "{$copy_sign} {$current_year}";
    }

    Then you can add it to a HTML widget in the header and use [db-copyright] shortcode followed by your text.

    Once in there let me know and i can provide the CSS to force it to the bottom.

    #609719
    Oleg

    I added a shortcode to the widget. Let’s set up CSS: https://lms.levellab.ru/

    #609722
    David
    Staff
    Customer Support

    Try this:

    .header-widget {
    	height: 100%;
    	display: flex;
    	flex-direction: column;
    }
    .header-widget aside:last-child {
    	margin-top: auto;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.