Hi
can someone help me how to change the color of the drawer on the mobile view to black? And the line of a drop-down menu is pink too and I want it to be changed to black too.
Please see attached screenshot:
@jmariegocela please share your theme url
@TheRealMan1 , https://littlebirdygroup.com/ this is the url, the theme is Impulse
@jmariegocela Please find below code and paste at the bottom of “theme.css.liquid”
.site-nav__dropdown {
border-top: 1px solid #000!important;
}
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
Add this css at the bottom
Online Store->Theme->Edit code
assets->theme.css
.site-nav__dropdown {
border-top: 1px solid #000 !important;
}
path {
stroke: #000 !important;
}
Best regards,
PageFly
@PageFly-Victor it didn’t work
@jmariegocela can you send me the screenshot where you added the code
@TheRealMan1 it did not work, as well
@PageFly-Victor see attached screenshot
@jmariegocela maybe you added my code in the wrong place, it should be theme.css instead of theme.css.liquid
please try again and add the code to the file “theme.css”
Add this css at the bottom
Online Store->Theme->Edit code
assets->theme.css
.site-nav__dropdown {
border-top: 1px solid #000 !important;
}
path {
stroke: #000 !important;
}
now you usually add this code in “theme.css.liquid”
important: you must add it inside …here…
.site-nav__dropdown { border-top: 1px solid #000 !important; } path { stroke: #000 !important; }@jmariegocela please search this code “.site-nav__dropdown {” and replace its border-top value to “#000” Line number: 5374
.site-nav__dropdown {
border-top: 1px solid #000 !important;
}
@TheRealMan1 it worked, but the hamburger icon for mobile view is still in pink, I want to turn it to black too
@jmariegocela please share the code of header.liquid
{%- assign main_menu = linklists[section.settings.main_menu_link_list] -%}
{%- assign toolbar_menu = linklists[section.settings.toolbar_menu] -%}
{%- assign logo_alignment = ‘left’ -%}
{% if section.settings.main_menu_alignment == ‘center-left’ or section.settings.main_menu_alignment == ‘center-split’ or section.settings.main_menu_alignment == ‘center’ or section.settings.main_menu_alignment == ‘center-drawer’ %}
{%- assign logo_alignment = ‘center’ -%}
{% endif %}
{%- assign dropdown_alignment = ‘left’ -%}
{% if section.settings.main_menu_alignment == ‘left-center’ or section.settings.main_menu_alignment == ‘center-split’ or section.settings.main_menu_alignment == ‘center’ %}
{%- assign dropdown_alignment = ‘center’ -%}
{% endif %}
{% if section.settings.drawer_menu_style == ‘Style 1’ %}
{% render ‘drawer-menu_1’,
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
%}
{% else %}
{% render ‘drawer-menu_2’,
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
%}
{% endif %}
{% render ‘cart-drawer’ %}
{%- assign template_name = template | replace: ‘.’, ’ ’ | truncatewords: 2, ‘’ | handle -%}
{%- assign sticky_header = false -%}
{% if section.settings.header_style == ‘sticky’ %}
{%- assign sticky_header = true -%}
{% endif %}
{%- assign overlay_header = false -%}
{%- assign has_logo = false -%}
{% if template_name == ‘index’ and section.settings.sticky_index %}
{%- assign overlay_header = true -%}
{% endif %}
{% if template_name == ‘collection’ and collection.image and section.settings.sticky_collection %}
{%- assign overlay_header = true -%}
{% endif %}
', 'll_ll' | replace:'
', 'll_ll' | replace:'
', 'll_ll' %} {% assign menu_arr = menu_arr | split:'ll_ll' %} {%- for menu_item in menu_arr -%} [data-title_handle="{{menu_item | handle}}"] {color: {{section.settings.change_menu_color}} !important;} {%- endfor -%} {%- endif -%}
{% if overlay_header or section.settings.announcement_above_header %}
{% render 'announcement-bar', section: section %}
{% endif %}
{% endunless %}
{% for block in section.blocks %}
{% if block.type == 'colored_menu_item' %}
{% assign bs = block.settings %}
{% if bs.color != blank and bs.menu_items != blank %}
{% assign menuItems = bs.menu_items | split: ',' %}
{% for menuItem in menuItems %}
{% if menuItem contains '|' %}
{% assign parentMenuItem = menuItem | split: '|' | first | strip | handleize %}
{% assign childMenuItem = menuItem | split: '|' | last | strip | handleize %}
.site-nav__link--has-dropdown[data-title_handle="{{parentMenuItem}}"] + .site-nav__dropdown .site-nav__link[data-title_handle="{{ childMenuItem }}"]:not(:hover),
.site-nav__link--has-dropdown[data-title_handle="{{parentMenuItem}}"] + .site-nav__dropdown .site-nav__dropdown-link[data-title_handle="{{ childMenuItem }}"]:not(:hover) {
color: {{ bs.color }} !important;
}
{% else %}
{% assign menuItemStrip = menuItem | strip | handleize %}
.site-nav__link[data-title_handle="{{menuItemStrip}}"]:not(:hover),
.site-nav__dropdown-link[data-title_handle="{{ menuItemStrip }}"]:not(:hover) {
color: {{ bs.color }} !important;
}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% if section.settings.toolbar_social or section.settings.toolbar_menu != blank or section.settings.main_menu_alignment != ‘center’ %}
{% render ‘toolbar’,
section: section,
overlay_header: overlay_header,
toolbar_menu: toolbar_menu
%}
{% endif %}
{% if logo_alignment == ‘left’ %}
{% render 'header-logo-block', section: section %}
{% endif %}
{% if logo_alignment == ‘left’ and section.settings.main_menu_alignment != ‘left-drawer’ %}
{% if section.settings.header_megamenu == "Mega menu 1" %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% elsif section.settings.header_megamenu == "Mega menu 2" %}
{% render 'header-desktop-nav_mega2', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
{% endif %}
{% if logo_alignment == ‘center’ %}
{% comment %}
{% if section.settings.main_menu_alignment == ‘center-split’ %}
{% if section.settings.main_menu_alignment == ‘center-left’ %}
{% if section.settings.header_megamenu == “Mega menu 1” %}
{% render ‘header-desktop-nav’, main_menu: main_menu %}
{% elsif section.settings.header_megamenu == “Mega menu 2” %}
{% render ‘header-desktop-nav_mega2’, main_menu: main_menu %}
{% else %}
{% render ‘header-desktop-nav_simple’, main_menu_links: main_menu.links %}
{% endif %}
{% endif %}
{{ 'general.drawers.navigation' | t }}
{% if section.settings.main_menu_alignment == ‘center’ or section.settings.main_menu_alignment == ‘center-drawer’ or section.settings.main_menu_alignment == ‘center-split’ or section.settings.main_menu_alignment == ‘center-left’ %}
{% endif %}{% if section.settings.main_menu_alignment == ‘center-split’ %}
{% render ‘header-split-nav’, main_menu: main_menu, section: section %}
{% endif %}
{% if section.settings.main_menu_alignment != ‘center-split’ %}
{% render 'header-logo-block', section: section %}
{% endif %}
{% endif %}
{% render 'header-icons', section: section %}
{% if section.settings.main_menu_alignment == ‘center’ %}
{% if section.settings.header_megamenu == "Mega menu 1" %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% elsif section.settings.header_megamenu == "Mega menu 2" %}
{% render 'header-desktop-nav_mega2', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
{% endif %}
{{ 'general.search.submit' | t }}
{{ 'general.accessibility.close_modal' | t | json }}
{% unless template == ‘customers/login’ or template == ‘customers/register’ %}
{% render 'customer-login-page' %}
{% unless overlay_header or section.settings.announcement_above_header %}
{% render ‘announcement-bar’, section: section %}
{% endunless %}
{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “link_list”,
“id”: “main_menu_link_list”,
“label”: “Navigation”,
“default”: “main-menu”
},
{
“type”: “select”,
“id”: “drawer_menu_style”,
“label”: “Drawer Menu Style”,
“default”: “Style 1”,
“options”: [
{
“value”: “Style 1”,
“label”: “Style 1”
},
{
“value”: “Style 2”,
“label”: “Style 2”
}
]
},
{
“type”: “select”,
“id”: “header_megamenu”,
“label”: “Menu type selection”,
“default”: “Mega menu 2”,
“options”: [
{
“value”: “Simple Menu”,
“label”: “Simple Menu”
},
{
“value”: “Mega menu 1”,
“label”: “Mega menu 1”
},
{
“value”: “Mega menu 2”,
“label”: “Mega menu 2”
}
]
},
{
“type”: “checkbox”,
“id”: “mega_menu_images”,
“label”: “Show mega menu images”,
“default”: true,
“info”: “Only for Mega menu 1.How to create a mega menu”
},
{
“type”: “select”,
“id”: “main_menu_alignment”,
“label”: “Header layout”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Logo left, menu left”
},
{
“value”: “left-center”,
“label”: “Logo left, menu center”
},
{
“value”: “left-drawer”,
“label”: “Logo left, menu drawer”
},
{
“value”: “center-left”,
“label”: “Logo center, menu left”
},
{
“value”: “center-split”,
“label”: “Logo center, menu split”
},
{
“value”: “center”,
“label”: “Logo center, menu below”
},
{
“value”: “center-drawer”,
“label”: “Logo center, menu drawer”
}
]
},
{
“type”: “select”,
“id”: “header_style”,
“label”: “Header style”,
“default”: “normal”,
“options”: [
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “sticky”,
“label”: “Sticky”
}
]
},
{
“type”: “checkbox”,
“id”: “sticky_index”,
“label”: “Overlay header over home page”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “sticky_collection”,
“label”: “Overlay header over collection”,
“info”: “(if collection image is enabled)”,
“default”: false
},
{
“type”: “color”,
“id”: “main_menu_color”,
“label”: “Main Menu color”
},
{
“type”: “color”,
“id”: “dropdown_menu_color”,
“label”: “Dropdown Menu color”
},
{
“type”: “richtext”,
“id”: “change_menu_color_text”,
“label”: “Change the color of menu items”,
“info”: “Each menu item on a new line”
},
{
“type”: “color”,
“id”: “change_menu_color”,
“label”: “Menu item color”
},
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “checkbox”,
“id”: “announcement_compact”,
“label”: “Use compact style”
},
{
“type”: “checkbox”,
“id”: “announcement_above_header”,
“label”: “Always show above header”
},
{
“type”: “header”,
“content”: “Toolbar”
},
{
“type”: “link_list”,
“id”: “toolbar_menu”,
“label”: “Navigation”,
“info”: “This menu won’t show dropdown items”
},
{
“type”: “checkbox”,
“id”: “toolbar_social”,
“label”: “Show social icons”
},
{
“type”: “header”,
“content”: “Mobile menu Content”
},
{
“type”: “text”,
“id”: “mob_content_heading”,
“label”: “Heading”
},
{
“type”: “richtext”,
“id”: “mob_content_text”,
“label”: “Text”
},
{
“type”: “text”,
“id”: “mob_content_phone”,
“label”: “Phone number”
},
{
“type”: “text”,
“id”: “mob_content_whatsapp”,
“label”: “WhatsApp number”,
“info”: “Wihtout ‘+’ and ‘0’ symbols in internation numbers”
},
{
“type”: “text”,
“id”: “mob_content_email”,
“label”: “Email”
}
],
“blocks”: [
{
“type”: “logo”,
“name”: “Logo”,
“limit”: 1,
“settings”: [
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo-inverted”,
“label”: “White logo”,
“info”: “Used when on top of an image”
},
{
“type”: “range”,
“id”: “desktop_logo_width”,
“label”: “Desktop logo width”,
“default”: 200,
“min”: 100,
“max”: 400,
“step”: 10,
“unit”: “px”
},
{
“type”: “range”,
“id”: “mobile_logo_width”,
“label”: “Mobile logo width”,
“default”: 140,
“min”: 60,
“max”: 200,
“step”: 10,
“unit”: “px”,
“info”: “Set as a max-width, may appear smaller”
}
]
},
{
“type”: “announcement”,
“name”: “Announcement”,
“limit”: 3,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“label”: “Heading”,
“default”: “Hassle-free returns”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Text”,
“default”: “30-day postage paid returns”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
}
]
},
{
“type”: “menu_image”,
“name”: “Menu image”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Menu title”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
}
]
},
{
“type”: “colored_menu_item”,
“name”: “Colored Menu item”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Color title”,
“info”: “optional”
},
{
“type”: “color”,
“id”: “color”,
“label”: “Color”
},
{
“type”: “textarea”,
“id”: “menu_items”,
“label”: “Menu items”,
“info”: “Separated by comma”
}
]
}
],
“default”: {
“settings”: {}
}
}
{% endschema %}