Add link navigation to mobile view - prestige

[admintb]

Hi,

Can I add this link navigation also on the mobile view?

[NomtechSolution]

To add link navigation to the mobile view in the Prestige theme, you can follow these steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Prestige theme and click on “Actions” > “Edit code” next to it.
3. In the left sidebar, locate and click on “Sections” folder.
4. Open the “header.liquid” file in the editor.
5. Scroll down to find the code for the mobile navigation menu. It might look like this:

{% section 'header-mobile-navigation' %}
​

1. In the same file, locate the “header-mobile-navigation.liquid” file in the Sections folder.
2. Open the “header-mobile-navigation.liquid” file in the editor.
3. Look for the HTML code that represents the mobile navigation menu. It should be enclosed within a <nav> tag or similar.
4. Add the links you want to include in the mobile navigation menu using HTML anchor tags (<a>). For example:

​

Replace /page1, /page2, and /page3 with the actual URLs or page handles you want to link to.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset → theme.css and paste this at the bottom of the file:

@media screen and (max-width: 767px) {
.breadcrumb--floating {
    position: inherit;
    display: block;
}
}

[admintb]

@ZestardTech Can you center the menu nav?

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset → theme.css and paste this at the bottom of the file:

@media screen and (max-width: 767px) {
ol.breadcrumb__list.unstyled-list {
justify-content: center;
}
}

[admintb]

@ZestardTech It works! Can you make dots instead of slashes?

[admintb]

@ZestardTech Can you make the text like this:

text-transform: math-auto;

When I add this code nothing happend

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset → theme.css and paste this at the bottom of the file:

@media screen and (max-width: 767px) {
.breadcrumb__list-item+.breadcrumb__list-item::before {
  content: "\2022";
  margin: 0 10px;
  font-family: "Cambria Math", serif;
  text-transform: none;
}
}

[admintb]

@ZestardTech Funny, on my iphone the font style is still in capitalize

Can you change the dots also to the desktop view please?

[ZestardTech]

Hello there

Remove this css.

@media screen and (max-width: 767px) {
.breadcrumb__list-item+.breadcrumb__list-item::before {
  content: "\2022";
  margin: 0 10px;
  font-family: "Cambria Math", serif;
  text-transform: none;
}
}

and add this css.

.breadcrumb__list-item+.breadcrumb__list-item::before {
  content: "\2022";
  margin: 0 10px;
  font-family: "Cambria Math", serif;
  text-transform: lowercase !important;
}

[admintb]

@ZestardTech My mistake, I meant that I still see the font on my iPhone in all uppercase. Can you fix this?

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset → theme.css and paste this at the bottom of the file:

@media only screen and (max-device-width: 768px) {
.smallcaps {
text-transform: capitalize!important;
}
}

[admintb]

@ZestardTech Can you make the text math-auto?

[ZestardTech]

Hello @admintb

Could you please explain in detail what you have to do and provide a screenshot?

[admintb]

@ZestardTech All good, I found a solution.

[ZestardTech]

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[Cedcommerce]

Hello @admintb ,

You can add link navigation to mobile view with the help of a snippet; please check the below steps to add snippets to your mobile view store.

Add a snippets

Breadcrumb.liquid files

.breadcrumbs { margin: 0px; / background: #f3f4f5; / font-size: 14px; padding: 10px 0; } .breadcrumbs__list { list-style-type: none; margin: 0; padding: 0; } .breadcrumbs__item { display: inline-block; margin-left: 10px; } .breadcrumbs__item:not(:last-child):after { border-style: solid; border-width: .10em .10em 0 0; content: ''; display: inline-block; height: 8px; margin: 0 .20em; position: relative; transform: rotate(45deg); vertical-align: middle; width: 8px; top:-1px; } .breadcrumbs__link, .breadcrumbs__link_n > a{ text-decoration: none; color: #121212; font-size: 16px; text-transform: capitalize; } .breadcrumbs__link[aria-current="page"] { color: inherit; font-weight: normal; text-decoration: none; } .breadcrumbs__link[aria-current="page"]:hover, .breadcrumbs__link[aria-current="page"]:focus { text-decoration: underline; }

{%- unless template == ‘index’

or template == ‘cart’

or template == ‘list-collections’

or template == ‘404’

or template.name == ‘login’

or template.name == ‘register’

or template.name == ‘account’

or template.name == ‘addresses’

-%}

{%- assign t = template | split: ‘.’ | first -%}

1. Home

{%- case t -%}

{%- when ‘search’ -%}

2. {{ 'Search ’ }}

{%- when ‘page’ -%}

3. {{ page.title }}

{%- when ‘product’ -%}

{%- unless collection -%}

{%- assign p = all_products[product.handle] -%}

{%- assign collection = p.collections | first -%}

{%- endunless -%}

{%- if collection.url -%}

4. {{ collection.title | link_to: collection.url }}

{%- endif -%}

5. {{ product.title }}

{%- when ‘collection’ and collection.handle -%}

{%- if current_tags -%}

6. {{ collection.title | link_to: collection.url }}

7. {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: “+”}}{%- endcapture -%}

   {{- current_tags | join: ’ + ’ -}}

{%- else -%}

8. {{ collection.title }}

{%- endif -%}

{%- when ‘blog’ -%}

{%- if current_tags -%}

9. {{ blog.title | link_to: blog.url }}

10. {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: “+” }}{%- endcapture -%}

    {{- current_tags | join: ’ + ’ -}}

{%- else -%}

11. {{ blog.title }}

{%- endif -%}

{%- when ‘article’ -%}

12. {{ blog.title | link_to: blog.url }}

13. {{ article.title }}

{%- else -%}

14. {{ page_title }}

{%- endcase -%}

{%- endunless -%}

And save it .

Goto the theme.liquid file and search “ var content” and add the below content.

{% render ‘breadcrumb’ %}

{% capture content %}{% include ‘quickview’ %}{% endcapture %}

var content = {{ content | json }};

Then save it and check the breadcrumb add over the store.

Hope this helps; let us know if you need further help with your Shopify store.

All the best,

CedCommerce