Hi, this is how the menu buttons looks like and placed on my website but I want to change the positions of them with moving the HOME button on top and CATALOG & CONTACT at the bottom but I can’t seem to move the HOME button with any code at all. Could you guys please help me? The website is https://80db77-09.myshopify.com/ and the password is fiverr
I am using this code on the custom css part for changing the placement
.menu-list li:first-child {
position: absolute;
top: 200%;
left: 10%;
}
.menu-list li:nth-child(2) {
position: absolute;
top: 19.3%;
left: 1%;
}
.menu-list li:last-child {
position: absolute;
top: 19.3%;
right: 1%;
}
Here is the ENTER page code
{% if section.settings.show_enter_page %}
{% if section.settings.logo_image %}
{% endif %}
{% if section.settings.add_date_time %}
{% endif %}
{% if section.settings.show_video_bg %}
{% endif %}
{% if section.settings.show_enter_button %}
{{ section.settings.enter_button_text }}
{% else %}
ENTER
{% endif %}
{% assign menu_handle = section.settings.home_nav %}
{% for link in linklists[menu_handle].links %}
- {{ link.title }}
{% endfor %}
{% if section.settings.show_two_bg %}
{{ section.settings.two_bg_enter_button_text }}
{% endif %}
{% if section.settings.show_enter_skip_button %}
SKIP INTRO
{% endif %}
{%- if settings.social_facebook_link != blank -%}
- {%- render 'icon-facebook' -%}
{{ 'general.social.links.facebook' | t }}
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
- {%- render 'icon-instagram' -%}
{{ 'general.social.links.instagram' | t }}
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
- {%- render 'icon-youtube' -%}
{{ 'general.social.links.youtube' | t }}
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
- {%- render 'icon-tiktok' -%}
{{ 'general.social.links.tiktok' | t }}
{%- endif -%}
{%- if settings.social_twitter_link != blank -%}
- {%- render 'icon-twitter' -%}
{{ 'general.social.links.twitter' | t }}
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
- {%- render 'icon-pinterest' -%}
{{ 'general.social.links.pinterest' | t }}
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
- {%- render 'icon-snapchat' -%}
{{ 'general.social.links.snapchat' | t }}
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
- {%- render 'icon-tumblr' -%}
{{ 'general.social.links.tumblr' | t }}
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
- {%- render 'icon-vimeo' -%}
{{ 'general.social.links.vimeo' | t }}
{%- endif -%}
<small>© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
<small>WEBSITE BY FKXMEDIA</small>
{% endif %}
{% schema %}
{
"name": "ENTER PAGE",
"settings": [
{
"type": "checkbox",
"id": "show_enter_page",
"info": "Enter page will replace the home page. If you want disable Enter page and Home Page, go to Theme Settings > Hide Home Page",
"label": "Show Enter Page",
"default": true
},
{
"type": "header",
"content": "Background Settings"
},
{
"type": "image_picker",
"id": "enter_background_image",
"label": "Background Image/Gif"
},
{
"type": "image_picker",
"id": "enter_background_image_mobile",
"label": "Mobile Background Image/Gif"
},
{
"type": "checkbox",
"id": "show_solid_color_enter",
"info": "Background will be replaced with color",
"label": "Change Background With Color",
"default": false
},
{
"type": "color",
"id": "solid_color_enter",
"label": "Background color",
"default": "#000000"
},
{
"type": "color_background",
"id": "enter_gradient_color",
"label": "Background gradient"
},
{
"type": "checkbox",
"id": "show_video_bg",
"info": "Background will be replaced with Video",
"label": "Change Background With Video",
"default": false
},
{
"type": "text",
"id": "background_video_url",
"label": "Video Url",
"info": "Upload your video to Files and then paste the link here"
},
{
"type": "text",
"id": "background_video_url_mobile",
"label": "Mobile Video Url"
},
{
"type": "header",
"content": "Logo Settings"
},
{
"type": "image_picker",
"id": "logo_image",
"label": "Logo Image/Gif",
"info": "Note that this logo will only be displayed on the Enter Page, to select the logo for the actual website go to Theme Settings > Logo"
},
{
"type": "range",
"id": "logoenter_size",
"label": "PC Logo Size",
"default": 100,
"min": 100,
"max": 500,
"step": 10
},
{
"type": "range",
"id": "logoenter_size_mobile",
"label": "Mobile Logo Size",
"default": 100,
"min": 100,
"max": 500,
"step": 10
},
{
"type": "range",
"id": "logo_container_top",
"label": "PC Logo Position (indent from top)",
"min": 0,
"max": 50,
"step": 1,
"unit": "%",
"default": 5
},
{
"type": "range",
"id": "logo_container_top_mobile",
"label": "Mobile Logo Position (indent from top)",
"min": 0,
"max": 50,
"step": 1,
"unit": "%",
"default": 5
},
{
"type": "radio",
"id": "logo_animation",
"label": "Logo Animation",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fade-in",
"label": "Fade in"
},
{
"value": "scale-in-center",
"label": "Scale in"
}
],
"default": "none"
},
{
"type": "checkbox",
"id": "add_date_time",
"label": "Add Date and Time",
"info": "The date and time will appear below the logo. If the new block has gone far from the logo down, crop the empty space of your Logo through the photo editor, or if you have a 3D logo, then through the Ezgif => Crop service",
"default": false
},
{
"type": "color",
"id": "date_time_color",
"label": "Date&Time Color",
"default": "#D4D4D4"
},
{
"type": "range",
"id": "date_time_size",
"label": "Date&Time Font Size",
"default": 13,
"min": 5,
"max": 33,
"step": 1
},
{
"type": "header",
"content": "Menu Settings"
},
{
"type": "link_list",
"id": "home_nav",
"label": "Select Navigation"
},
{
"type": "range",
"id": "menu_font_size",
"label": "Menu Font Size",
"default": 16,
"min": 12,
"max": 33,
"step": 1
},
{
"type": "range",
"id": "enter_menu_space",
"label": "Menu Spacing",
"default": 14,
"min": 0,
"max": 50,
"step": 1
},
{
"type": "color",
"id": "menu_text_color",
"label": "Menu Text Color",
"default": "#ffffff"
},
{
"type": "select",
"id": "menu_text_transform",
"label": "Menu Text Transform",
"default": "capitalize",
"options": [
{
"value": "uppercase",
"label": "Uppercase"
},
{
"value": "lowercase",
"label": "Lowercase"
},
{
"value": "capitalize",
"label": "Capitalize"
}
]
},
{
"type": "select",
"id": "menu_list_alignment",
"label": "Menu Text Alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "show_text_glow",
"label": "Enable Text Glow",
"default": false
},
{
"type": "color",
"id": "menu_text_glow_color",
"label": "Glow Color",
"default": "#D4D4D4"
},
{
"type": "checkbox",
"id": "enable_menu_highlight",
"label": "Enable Menu Highlight",
"info": "If you select a menu instead of enter button, links will have a background highlight on hover",
"default": false
},
{
"type": "color",
"id": "menu_highlight_color",
"label": "Highlight color",
"default": "#D4D4D4"
},
{
"type": "checkbox",
"id": "show_enter_button",
"label": "Change menu to custom button",
"info": "The menu will be replaced with button with custom text",
"default": false
},
{
"type": "text",
"id": "enter_button_text",
"label": "Button text",
"default": "Enter"
},
{
"type": "header",
"content": "Footer Settings"
},
{
"type": "checkbox",
"id": "show_enterfooter",
"info": "To add social links please go to Theme Settings at the bottom of this settings",
"label": "Show Social icons",
"default": true
},
{
"type": "color",
"id": "icons_color",
"label": "Social icons color",
"default": "#ffffff"
},
{
"type": "color",
"id": "copy_text_color",
"label": "Copyright Text color",
"default": "#ffffff"
},
{
"type": "checkbox",
"id": "show_enter_skip_button",
"label": "Show Skip Animation Button",
"info": "A button will appear in the lower right corner, when you click on it, you will automatically redirected to the catalog page",
"default": false
},
{
"type": "color",
"id": "enter_skip_button_color",
"label": "Skip button color",
"default": "#D4D4D4"
},
{
"type": "range",
"id": "enter_skip_button_size",
"label": "Skip button size",
"default": 16,
"min": 10,
"max": 35,
"step": 1
},
{
"type": "header",
"content": "Click to Activate Background",
"info": "Here you can select two backgrounds (Gif/Image), the second one will appear and replace the first one when you click on button"
},
{
"type": "checkbox",
"id": "show_two_bg",
"label": "Enable Click to Activate Background",
"default": false
},
{
"type": "image_picker",
"id": "two_bg_first",
"label": "First Background Image/Gif"
},
{
"type": "image_picker",
"id": "two_bg_second",
"label": "Second Background Image/Gif"
},
{
"type": "text",
"id": "two_bg_enter_button_text",
"label": "Button text",
"default": "Enter"
},
{
"type": "text",
"id": "two_bg_seconds",
"label": "Time to redirect",
"default": "5",
"info": "After clicking on the button, a new background appears. Specify the desired time to display the second background, before the redirect to the catalog link"
}
]
}
{% endschema %}
