Jump to content

Moving blog category breadcrumbs to the top of the page in the Nolan template

By UpinaDay, in Site Design & Styles

Go to solution Solved by tuanphan,

Recommended Posts

UpinaDay Level 5

UpinaDay

Posted
Posted (edited)

Hey All!

I'm working in the Nolan template on a blog page. Does anyone know how to move the categories out from above the post titles to the top or side of the page so it's a better UX? Currently, I'm only seeing the option to place them at the top of the post titles which looks messy and you can't tell it's a category. I attached a screenshot. 

Thanks!

Lindy

Screen Shot 2022-07-05 at 11.38.18.png

Edited by UpinaDay
Link to comment
  • Replies 6
  • Views 311
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • 2 weeks later...
  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted
10 hours ago, UpinaDay said:

Thank you @tuanphan

www.upinaday.co/blog

 

Sorry about that! .co  not .com

Add to Settings > Advanced > Code Injection > Footer 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<ul class="tp-ul"><li><a href="/blog/category/Website+Before+and+Afters">Web Before and Afters</a></li><li><a href="/blog/category/Website+Design+Tips">Web Design & Tips</a></li></ul>').insertBefore('.blog-masonry-wrapper.masonry-ready');
	});
</script>
<style>
  ul.tp-ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.tp-ul li {
    margin-right: 1vw;
    margin-left: 1vw;
    background-color: gray;
    color: white;
    padding: 10px;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources