Menu Items

Kimberley Leary Jan 27, 2014 08:41AM PST

Hi,

I have created a second menu using HTML and placed the webpage links in. However at the moment they do not link to the mobile version. Will they divert to the mobile pages as soon as the site goes live?

 <nav class="x-nav-menu">

<li><a href="http://www.jmcsweeneyphotography.co.uk/about">About Me</a></li>
<li><a href="http://www.jmcsweeneyphotography.co.uk/blog">My Blog</a></li>
<li><a href="http://www.jmcsweeneyphotography.co.uk/contact-me">My Gallery</a></li>
<li><a href="http://www.jmcsweeneyphotography.co.uk/contact-me">Contact Me</a></li>

Also how do I exclude pages from the header navigation?

Thanks

Kim

Up -1 rated Down
Jennifer Jan 27, 2014 09:30AM PST Mobify Agent

Hi Kim,

The links should work once you’ve added the Mobify Tag to your site.

Currently since you don’t have the tag added to your site, we send the site through a proxy that adds our tag to the site. So instead of “http://www.jmcsweeneyphotography.co.uk/” the URL becomes “http://http.www.jmcsweeneyphotography.co.uk.tag.mobifyproxy.com/”. We can’t show the mobile version of the page without the tag in place. The links that you’ve hardcoded on to the page navigate directly to your domain, so we can’t run the pages through our tag injector.

There are two ways you can fix the links so you see the mobile version. The first would be adding the tag to the pages on your site. The other, would be changing the navigation URLs to relative URLs. That would look like this:

<li><a href="/about">About Me</a></li> <li><a href="/blog">My Blog</a></li> <li><a href=/contact-me">My Gallery</a></li> <li><a href="/contact-me">Contact Me</a></li>

By doing this, when you click on one of the links instead of being taken to “http://www.jmcsweeneyphotography.co.uk/about”, you will be taken to “http://http.www.jmcsweeneyphotography.co.uk.tag.mobifyproxy.com/about”, which will have the Mobify Tag in place.

Excluding pages from your navigation can be tricky, depending on what you need to exclude. If you’re just trying to include the top navigation and none of the sub-menu links you could update your navigation selector to something like this:

#menu-main-menu > li > a

If you need to exclude different pages, you may need to use a Javascript selector (documentation can be found here). Within the selector you can filter the links to include only the ones you want. However, in order to do this you’ll need to have a basic to intermediate understanding of Javascript.

Hope this helps,
Jennifer

Up 0 rated Down
Kimberley Leary Jan 30, 2014 05:02AM PST
Hi, Thanks for your reply I had this working really well. But now I've done something and the navigation has stopped working. I can't recreate what I had before. I deleted the menu global navigation because some of the links seemed to be missing and haven't been a ble to have it working since.

Can you help please?
Kim
Up -3 rated Down
Jennifer Jan 30, 2014 10:58AM PST Mobify Agent

Hi Kim,

It looks like there’s a couple things that are causing the navigation to no longer work.

In order to get the navigation in the header working you’ll need to update the global “navigation” selector. The selector will need to return a collection of links for the menu, and none of the outer containers. Currently it looks like your navigation selector is returning the outer div that contains the entire navigation.

Updating the selector to something like this might work:

#menu-main-menu > li > a

You’ll also need to update the mark up in the header template for the menu. It should look something like this:

<nav class="x-nav-menu">
            <ul>
                {#navigation}
                    <li>{.}</li>
                {/navigation}
            </ul>
    </nav>

If you wish to hard code the links in the header drop down rather than selecting them from your existing site, you will need to replace the {#navigation} section in your header template with the following:

<nav class="x-nav-menu">
    <ul>
        <li><a href="/page1.html>Page 1</a></li>
        <li><a href="/page2.html>Page 2</a></li>
        <li><a href="/page3.html>Page 3</a></li>
    </ul>
</nav>

You may also want to make a few changes to the navigation you’ve hard coded into the Home template. Currently it looks like you have part of it in the header file, and the rest in the Home template file. Also the content in the header file contains an li and a nav tag that are both not closed correctly, which is causing display errors on your page. If you wish to include those links on the homepage as well as the header menu, you can simply add the following to your Home template:

<ul>
    <li><a href="/about">About Me</a></li> 
    <li><a href="/blog">My Blog</a></li>
    <li><a href=/contact-me">My Gallery</a></li> 
    <li><a href="/contact-me">Contact Me</a></li>
</ul>

The section above could go either above or below your carousel.

Hope this helps,
Jennifer

Up -1 rated Down
Kim Jan 31, 2014 11:56AM PST
Hi Jennifer, thank you for all your help!

Changing the navigation to #menu-main-menu > li > a has worked but there is still something not quite right. The page is not resizing and the content is too big for the page.

I've removed the second menu code from the home page because it wasn't displaying at all. Have I got some stray code somewhere? I'm not sure where else to look.

Thanks again for all your help, I was 90% complete before this little hiccup haha

Kim
Up 3 rated Down
Jennifer Jan 31, 2014 12:10PM PST Mobify Agent

Hi Kim,

It looks like you still have a few errors in your header template. The last two lines currently look like this:

<nav class="x-nav-menu"><li><a href="tel:someNumber"/>Call Me</a>
</header

If you look closely you’ll see that the closing header tag is missing the ‘>’ and the <nav> and <li> tags are not being closed properly. Updating those lines to look like this should help:

<nav class="x-nav-menu"><li><a href="tel:someNumber"/>Call Me</a></li></nav>
</header>

Just as a side note I removed the number from your call me link, so if you copy my suggested fix you’ll need to update that number as well!

If you’re still seeing some issues with the content being too big for the screen, I would suggest going through the CSS for the page to make sure that the correct heights and widths are being set for elements on the page.

Thanks,
Jennifer

Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
support@mobify.me
https://cdn.desk.com/
mobify
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete