Add Secondary Sidebar to Navigation Pro Theme

[palmtek]

I'm not a CSS guy or programmer, just an old server guy.
I've looked at themes that already have the option for secondary sidebars but I don't like the way they look and would need too much work to give it the same look and feel as Navigation Pro, some just break stuff. I don't want to change themes.

I've remarked out the "genesis_unregister_layout" for the 'sidebar-content-sidebar', but the secondary sidebar ends up at the bottom of the layout and the columns don't line up.
I've messed with the float from right to left, but I'm not smart enough to fully grasp the layout logic.

I need a smart guy to show me the correct CSS to make this change.
Thank you please.

https://technoogies.com/

[palmtek]

Not a very lively forum I guess.

[Brad Dalton]

If you look at one f the themes which uses the same sidebar, you can inspect the element and find the CSS which you need to make it work correctly.

Or

You can use CSS grid https://www.w3schools.com/css/css_grid.asp

---

Tutorials for StudioPress Themes.

[palmtek]

Thank you braddalton. That's a very useful link.

[palmtek]

It doesn't work. The display isn't set to grid for one. Changing the float can't bring the secondary sidebar into position because it seems to be outside of the container or wrapper area.

[Brad Dalton]

Both methods should work however you'll need to use the correct CSS which is something you need to work out at your end.

---

Tutorials for StudioPress Themes.

[palmtek]

I understand it now. Thank you.

[palmtek]

To modify Navigation Pro into three columns. Maybe not the best thing to do but it worked.

.wrap {
	width: 100%;
	box-sizing: inherit;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1240px;
}
/*  -[ START 3 Columns ]- */
.site-inner {
	padding-top: 30px;
}
.content-sidebar-wrap {
	box-sizing: inherit;
	float: right;
	width: 1020px;
}
#genesis-sidebar-primary {
	float: right;
	width: 320px;
}
#genesis-sidebar-secondary {
	box-sizing: inherit;
	float: left;
	width: 160px;
}
.content {
	max-width: 680px;
	float: left;
}
/*  -[ END 3 Columns ]- */

[Author]

Posts