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

[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/

[David]

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

[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.

[David]

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

[Oleg]

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

[David]

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?

[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 🙂

[David]

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.

[Oleg]

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

[David]

Try this:

.header-widget {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.header-widget aside:last-child {
	margin-top: auto;
}

[Author]

Posts