Sider – library align menu left

This topic has 15 replies, 4 voices, and was last updated 1 year, 8 months ago by David.

Viewing 15 posts - 1 through 15 (of 16 total)

Author

Posts

August 12, 2022 at 8:56 am #2311159

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

August 12, 2022 at 8:56 am #2311160

STENCIL

Perhaps something wrong with my code?

August 12, 2022 at 10:48 am #2311243

Ying

Staff

Customer Support

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 🙂

August 15, 2022 at 1:39 am #2313069

STENCIL

Thank you – linked.

August 15, 2022 at 1:51 am #2313082

Fernando

Customer Support

Hi Stencil,

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

August 15, 2022 at 1:57 am #2313086

STENCIL

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

August 15, 2022 at 5:00 am #2313277

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.

August 15, 2022 at 10:51 am #2313653

Ying

Staff

Customer Support

Try add this CSS:

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

August 16, 2022 at 2:53 am #2314223

STENCIL

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

August 16, 2022 at 3:20 am #2314252

David

Staff

Customer Support

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

August 16, 2022 at 3:26 am #2314261

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

August 16, 2022 at 3:42 am #2314275

David

Staff

Customer Support

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.

August 16, 2022 at 3:52 am #2314290

STENCIL

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

August 16, 2022 at 4:14 am #2314302

David

Staff

Customer Support

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

August 16, 2022 at 4:58 am #2314335

STENCIL

Perfect thank you so much David 🙂

Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Sider – library align menu left

Popular Articles

Start building better websites today.