store: julisa.com
pword: julialisa21 (the “enter password” link is super small and white in the bottom right corner on desktop. it’s hard to see)
I have a go-by section near the top of my homepage that says “14k gold-filled, waterproof, etc” as an image in the dark teal bar.
The pink bar above it is what I’m trying to style with live text. It seems like a Visual Navigation Banner section is the best fit for this content in my theme. But I’d like the 4 listed items shown to be spread out further in the section. How can I reduce the padding/margins on the left and right of the list so that the 4 list items fill the same width as the rest of the content on the page and are evenly spaced inside this pink section?
Here is the liquid for my navigation-banner.liquid section, but I don’t want to target all nav lists on the site, just this one on the homepage:
{%- assign banner_linklist = section.settings.banner_linklist -%} {% if linklists[banner_linklist].links.size > 0 %} {% liquid assign has_link_animation = false if section.settings.nav_background_color == 'rgba(0,0,0,0)' or section.settings.nav_background_color == settings.color_body_bg assign has_link_animation = true endif %}-
{% for link in linklists[banner_linklist].links %}
- 0 %} class="children"{% endif %}> {{ link.title }} {% endfor %}
-
{% for link in linklists[banner_linklist].links limit: 4 %}
- 0 %} class="children"{% endif %}> {{ link.title }} {% endfor %}
- See more{% render 'theme-icon' with icon: 'plus', iconClasses: 'plus-icon', iconSize: 16 %}
-
{% for link in linklists[banner_linklist].links %}
- 0 %} class="children"{% endif %}> {{ link.title }} {% endfor %}
- See less{% render 'theme-icon' with icon: 'minus', iconClasses: 'minus-icon', iconSize: 16 %}
{% style %}
blog-nav-banner {
display: block;
}
.template–blog_header .title-bar {
margin-bottom: 0;
}
#navigation-banner–{{ section.id }}.navigation-banner-wrapper nav {
padding: 15px 0;
}
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
justify-content: {% if section.settings.navigation_position == ‘center’ %}center{% else %}left{% endif %}
}
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul li a {
text-decoration: none;
color: var(–text-color);
font-size: var(–base-font-size);
display: flex;
justify-content: center;
align-items: center;
}
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul li a span {
padding-left: 5px;
}
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul li {
padding: 5px 15px;
margin: 5px 15px 5px 0;
border-radius: 15px;
width: max-content;
background-color: {{ section.settings.nav_background_color }};
}
@media (max-width: 767px) {
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul.banner-links–desktop {
display: none;
}
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul.banner-links–mobile-expanded {
display: none;
}
}
@media (min-width: 768px) {
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul.banner-links–mobile-collapsed,
#navigation-banner–{{ section.id }}.navigation-banner-wrapper ul.banner-links–mobile-expanded {
display: none !important; /* Using ‘important’ to override the js inline style on larger screens */
}
}
{% endstyle %}
{% schema %}
{
“name”: “t:sections.blog–navigation-banner.name”,
“class”: “blog–navigation-banner”,
“settings”: [
{
“type”: “link_list”,
“id”: “banner_linklist”,
“label”: “t:all.Navigation”,
“default”: “footer”
},
{
“type”: “color”,
“id”: “nav_background_color”,
“label”: “t:all.Background_color”,
“default”: “#EEEEEE”
},
{
“type”: “radio”,
“id”: “navigation_position”,
“label”: “t:sections.blog–navigation-banner.settings.navigation_position.label”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “t:all.Left”
},
{
“value”: “center”,
“label”: “t:all.Center”
}
]
}
],
“presets”: [
{
“name”: “t:sections.blog–navigation-banner.presets.name”
}
],
“enabled_on”: {
“templates”: [
“blog”
]
}
}
{% endschema %}
