Hi Guys!
I want to center my menus in the studio theme. ( inline )
I want them centered to the entire width of the website, not just the width of the header.
Does anyone have the code for this to place in base.css ?
If anyone has the code to change the menu color from gray to white text, you are more than welcome to send this as well!
It is not possible to change in the theme editor.
Thanks
BR
Hi @PasqalW
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file → Save
.header–top-center .header__inline-menu {
justify-self: center !important;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
Hello @PasqalW
It’s GemPages support team and glad to support you today.
You can follow these steps:
Go to Online Store → Theme → Edit code
Open your base.css file and paste the following code below:
@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {
justify-self: center;
}
}
Let us know how it works for you.
Best regards,
GemPages Support Team
Hi @PasqalW ,
Please send me the code of header.liquid file, I will help you to edit it
Hi Litos!
Thank you for reaching out!
Where shall I send the code?
BR
Hi @PasqalW ,
You can send the code directly in post or private message, I will check it
Hi @PasqalW ,
Please change all code:
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{%- if section.settings.menu_type_desktop == 'mega' -%}
{%- endif -%}
{%- if settings.cart_type == "drawer" -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- style -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}
.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if settings.cart_type == "drawer" -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- if settings.cart_type == "notification" -%}
{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- endif -%}
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.getElementById('shopify-section-header');
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);
this.createObserver();
}
disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}
createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});
observer.observe(this.header);
}
onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}
this.currentScrollTop = scrollTop;
}
hide() {
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
this.header.classList.add('shopify-section-header-sticky', 'animate');
this.header.classList.remove('shopify-section-header-hidden');
}
reset() {
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
}
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
this.disclosures.forEach(disclosure => disclosure.close());
}
closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}
customElements.define('sticky-header', StickyHeader);
{% endjavascript %}
{%- if request.page_type == 'index' -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
{%- endif -%}
{% schema %}
{
"name": "t:sections.header.name",
"class": "section-header",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.logo.label"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "middle-center",
"label": "t:sections.header.settings.logo_position.options__4.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "select",
"id": "menu_type_desktop",
"options": [
{
"value": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.options__1.label"
},
{
"value": "mega",
"label": "t:sections.header.settings.menu_type_desktop.options__2.label"
}
],
"default": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.label",
"info": "t:sections.header.settings.menu_type_desktop.info"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "t:sections.header.settings.enable_sticky_header.label",
"info": "t:sections.header.settings.enable_sticky_header.info"
},
{
"type": "header",
"content": "t:sections.header.settings.mobile_layout.content"
},
{
"type": "select",
"id": "mobile_logo_position",
"options": [
{
"value": "center",
"label": "t:sections.header.settings.mobile_logo_position.options__1.label"
},
{
"value": "left",
"label": "t:sections.header.settings.mobile_logo_position.options__2.label"
}
],
"default": "center",
"label": "t:sections.header.settings.mobile_logo_position.label"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.header.settings.margin_bottom.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 20
}
]
}
{% endschema %}
Hi @PasqalW ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
@media screen and (min-width: 990px){
.header--middle-left {
grid-template-columns: 1fr auto 1fr !important;
}
}
Hope it helps!
Hi @Litos
It will not work, I have placed the code in the bottom of base.css
www.pasqalwatches.com , still the same unfortunately.
BR
Hi @PasqalW ,
Because your CSS is currently missing the ‘}’ tag, please add the code here, it will work fine
Hi @Litos
It works perfectly now!
Thank you very very much!
You dont know how to change the menu text color?
I want it white, now it is grey and I cant change it in the theme settings.
BR
