Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help aligning breadcrumb
Tagged: alignment, breadcrumb
- This topic has 5 replies, 2 voices, and was last updated 9 years, 9 months ago by emasai.
-
AuthorPosts
-
July 19, 2014 at 3:06 pm #114967jublack2000Member
Hi there,
I was wondering if anyone could help me to align the breadcrumb text with the
rest of the content. I'm using Dynamik. I used this code to move the breadcrumb below the header:remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );Everything looks great except the breadcrumb text is full width all the way to the left. I'd like to left-aligned with the rest of the content (i.e. in line with the logo, navigation text and rest of the content).
Do I have to assign some type of wrap within the breadcrumb and then style it with css?
Thanks for your help!
Juliana
http://www.csao.netJuly 19, 2014 at 3:38 pm #114971emasaiParticipantTry changing to the following:
.breadcrumb{
background: #EFF4F8;
border-top: 0px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
border-left: 0px solid #D6D6D6;
border-right: 0px solid #D6D6D6;
/* margin-top: 5px; */
/* margin-bottom: 30px; */
padding: 5px 20px 6px 0;
color: #333333;
font-family: 'Lato',sans-serif;
font-size: 13px;
font-size: 1.3rem;
max-width: 960px;
margin: 5px auto 30px;
}
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJuly 19, 2014 at 7:04 pm #115001jublack2000MemberHi Lynne,
Thanks for taking the time to help me with this... really appreciate it!
The code mostly worked, except the border under the text no longer stretches full width. Do you know if there's a way to align just the text?
Thanks again!
Juliana
July 20, 2014 at 7:42 am #115028emasaiParticipantThe border is part of the .breadcrumb so it moves with it. The only way, would be to add an inner wrap. See this snippet
http://my.studiopress.com/snippets/structural-wraps/
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJuly 20, 2014 at 9:25 am #115039jublack2000MemberI thought so... I came across that code snippet before but wasn't sure how to use it.
Would I modify it to something like this:
<?php //* Do NOT include the opening php tag //* Add support for structural wraps add_theme_support( 'genesis-structural-wraps', array( 'breadcrumb' ) );
So I would insert that inside my functions file, and then how do I style the inner wrap?
Thanks again for your assistance!
Juliana
July 20, 2014 at 10:06 am #115040emasaiParticipantAccording to your theme, there will probably already be structural wraps. So go into your functions file and find lines similar to these - and add the breadcrumbs like so
//* Add support for structural wraps add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'breadcrumbs', 'subnav', 'site-inner', 'footer-widgets', 'footer' ) );
Be extremely careful when changing your functions file as you can very easily get the white screen of death if you omit anything. The best way is to make a copy of the original and then upload the new file with FTP. That way you can always revert back to the old file.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.