[Resolved] Sider – library align menu left

[STENCIL]

Hello,
I’m using the Sider library template but I can’t work out why/how to align my menu text left, and also extend the line I’ve added using border-bottom to run wider, starting where text starts on left, running across and all the same width. Can you help?

My edited css below:

/* GeneratePress Site CSS */ @media (min-width: 1000px) {
	body {
		margin-left: 450px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 450px;
		z-index: 450;
		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;		
		border-bottom: 1pt solid #0e9388;
	}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
	align-items: left;

}
.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
	order: 3;
	text-align: center;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 70px;
	margin-bottom: 280px;	
	text-align: left;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation .main-nav>ul {
    flex-direction: column;
}

.nav-float-right .header-widget .widget {
    margin-bottom: 5px;
}

.nav-float-right #site-navigation {
    margin-right: auto;
}

.main-navigation.toggled .main-nav li {
	text-align: left !important;
}

@media (max-width:768px) {
	.separate-containers   {
		margin-top: 20px;
		margin-bottom: 0;
	}

	.nav-float-right .inside-header .main-navigation {		
		margin-top: 0;
	}
	
} /* End GeneratePress Site CSS */

[STENCIL]

Perhaps something wrong with my code?

[Ying]

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[STENCIL]

Thank you – linked.

[Fernando]

Hi Stencil,

Tried viewing your site but the password is incorrect. Can you check if the password provided is working?

[STENCIL]

Sorry – I’ve changed it, what I gave works now.

[STENCIL]

Sending again incase you don’t have it – same as before, I just had another plugin running over the password protect one, turned off now.

[Ying]

Try add this CSS:

@media (min-width: 769px) {
.site-header .main-navigation li {
    width: 450px;
    margin-left: -40px;
}
}

[STENCIL]

Thanks added but nothing has changed – text alignment still central.

[David]

Hi there,

try this:

.nav-float-right #site-navigation,
.nav-float-right #site-navigation .main-nav,
.nav-float-right #site-navigation .main-nav li{
    width: 100%;
}
.nav-float-right #site-navigation .main-nav li a {
    padding-left: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[STENCIL]

Thank you – no change.

Incase there is something I need to edit/remove, here is a copy of my additional CSS currently…

/* GeneratePress Site CSS */ @media (min-width: 1000px) {
	body {
		margin-left: 450px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 450px;
		z-index: 450;
		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;		
		border-bottom: 1pt solid #0e9388;
	}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
	align-items: left;

}
.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
	order: 3;
	text-align: center;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 70px;
	margin-bottom: 280px;	
	text-align: left;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation .main-nav>ul {
    flex-direction: column;
}

.nav-float-right .header-widget .widget {
    margin-bottom: 5px;
}

.nav-float-right #site-navigation {
    margin-right: auto;
}

.main-navigation.toggled .main-nav li {
	text-align: left !important;
}

@media (max-width:769px) {
	.separate-containers   {
		margin-top: 20px;
		margin-bottom: 0;
	}
	

	@media (min-width: 769px) {
.site-header .main-navigation li {
    width: 450px;
    margin-left: -40px;
}
}
	.nav-float-right .inside-header .main-navigation {		
		margin-top: 0;
	}

	.nav-float-right #site-navigation,
.nav-float-right #site-navigation .main-nav,
.nav-float-right #site-navigation .main-nav li{
    width: 100%;
}
.nav-float-right #site-navigation .main-nav li a {
    padding-left: 0;
}
	
} /* End GeneratePress Site CSS */

[David]

Ok, theres a few errors in your CSS in the Customizer > Additional CSS.
Delete all of it, and add this:

.nav-float-right .inside-header .main-navigation {
    margin-top: 0;
}

.nav-float-right #site-navigation,
.nav-float-right #site-navigation .main-nav,
.nav-float-right #site-navigation .main-nav li {
    width: 100%;
}

.nav-float-right #site-navigation .main-nav li a {
    padding-left: 0;
}
@media (min-width: 1000px) {
    body {
        margin-left: 450px;
    }

    .site-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 450px;
        z-index: 450;
        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;
        border-bottom: 1pt solid #0e9388;
    }

    .inside-header {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: left;

    }

    .site-branding,
    .site-logo {
        order: 1;
    }

    .header-widget {
        order: 3;
        text-align: center;
    }

    .nav-float-right .inside-header .main-navigation {
        order: 2;
        float: none;
        margin-top: 70px;
        margin-bottom: 280px;
        text-align: left;
    }

    .dropdown-click .site-header .main-navigation ul ul {
        position: relative;
    }

    .main-navigation .main-nav>ul {
        flex-direction: column;
    }

    .nav-float-right .header-widget .widget {
        margin-bottom: 5px;
    }

    .nav-float-right #site-navigation {
        margin-right: auto;
    }

    .main-navigation.toggled .main-nav li {
        text-align: left !important;
    }
}

@media (max-width:769px) {
    .separate-containers {
        margin-top: 20px;
        margin-bottom: 0;
    }

}

NOTE: the CSS from the other topic, you can at the very top of your CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[STENCIL]

Oh that’s worked for the menu thank you!!!
Could the burger menu have the same layout – ie divider lines / spacing?

[David]

Add this at the very top of that CSS:

#mobile-header.main-navigation li {
    padding: 0 20px;
}
#mobile-header.main-navigation li a {
    border-bottom: 1pt solid #0e9388;
    padding-left: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[STENCIL]

Perfect thank you so much David 🙂

[Author]

Posts