Archived topic
I need some help w/ layout+styling of nav bar, breadcrumbs, content
5 replies · Started by Matthew on September 9, 2017
Hey guys,
I'm building a master website that I can save as a Flywheel Blueprint to make new site builds way faster. In trying to get that done, however, I'm having some trouble getting everything to look right. I could really use some help, and I'm probably missing something really obvious, but I'm stumped.
Here's the site URL for your reference: https://www.stonecrestleadership.com?bypass=prototype.
Here are my specific issues/questions:
- My site title, the left edge of the navigation bar, breadcrumbs, and content are staggered all over the place instead of aligned left together along the same vertical plane. I want all my site pages to be full-width, but NOT have the navigation bar start 1/4 of the way across the screen while the breadcrumbs and main content area are flesh left with no white space at all. Please help me with how to control the site-wide display so it's more attractive and professional; I can't seem to figure out where these controls are, and I don't think I should have to use custom code or even CSS to get the desired results.
- I am using Breadcrumbs NavXT. I know that's not your plugin, so I don't expect you to support it, but do you know offhand where/how to style the output? I want to shrink the text size.
- I put the breadcrumbs code in the "Inside Content Container" block of the GP Hooks screen,
and the plugin appears to be working correctly. I want to add white space above and below the breadcrumbs so it's not crowding the navigation bar or content, however; how would I do that?
Thanks in advance for your help!
Hi there,
1. Currently, it looks like you're using the full width option in the Page Builder Container meta box - you'll want to disable that and just set it to Default.
Then you'll want to set your inner header and navigation widths to match:
https://docs.generatepress.com/article/header-layout/
https://docs.generatepress.com/article/navigation-layout/
If you set everything to contained, all of your elements will be as wide your container width and will match up: https://docs.generatepress.com/article/container-width/
2 + 3: Wrap your breadcrumbs code in a container like this:
<div class="breadcrumbs">
Breadcrumb code in here
</div>Then add this CSS:
.breadcrumbs {
margin: 20px 0;
font-size: 17px;
}Let me know if this helps or not :)
Thanks Tom; those tweaks made a huge difference. It almost looks perfect! The only issue left is that my menu is full-width (as it should be), but not aligned with the logo and content area. I want the navigation bar element to stretch to the far left and right edges of the screen, but have the first navigation item left-aligned with the logo and content.
I set the Primary Navigation's Navigation Width to "Full," and the Inner Navigation Width to "Contained," but it's not displaying correctly. What am I missing, and how do I fix this?
Ah, you could try this:
@media (min-width: 769px) {
.inside-navigation {
padding-left: 40px;
}
}That fixed it; thanks! My site alignment & layout looks terrific now! All that's left is to put in the content and set colors. Thanks for your excellent and timely support, Tom. I have been very impressed with your responsive, professionalism, and expertise. I'm a VERY happy customer; keep up the great work!!
Awesome! Really glad I was able to help :)
