Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #164706

    Hi, I have set up a single page site with the exception of the blog, which is a separate page. The majority of the main nav uses #anchor links to navigate a user up and down the long, scrolling single page. But, I had to use absolute links to get my main nav to work when navigating back from a separate pages, like the blog and all of the portfolio pages. Problem is, there’s a bug now: the first item in the nav (about) always has the on state / indicator underline on. Obviously this will cause much user confusion. Please help, my url is http://www.getaltrd.com

    Thanks much!

    • This topic was modified 11 years, 2 months ago by altr.
    #164711

    The second issue is that the absolute links only work back from the blog and portfolio pages on desktop – but do not work using the fly-out menu on mobile.

    #165412

    Hey!

    I’m not sure this is actually “fixable”. The issue is that as long as you are on the home page the absolute about link will be active because the url is the current page.

    The one page layout using anchors is just that: a one page layout. What would be a better solution would be to have an alternate menu for the blog page with links back to the home page. You could do this using css to hide the menu items on each page. Just go to your menus manager and in the top right “screen options” tab click the box to show classes on your menu items. Add hide-home to the items you want to hide on the home page and hide-blog for the items you want to hide on the blog page.

    Then add the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    
    #top.home .hide-home{ display: none; }
    #top.blog .hide-blog {display: none;}
    
    

    Cheers!
    Devin

    #165447

    Thank you Devin!!
    That worked great for the blog, but I am not sure how to apply it to my portfolio project pages, to which there are 12 and counting.
    Any advice there?

    #165461

    Hey!

    Try this:
    #top.single-portfolio .hide-class{ display: none; }

    Regards,
    Josue

    #165766

    I’m not able to get that to work. I’m not sure why…

    #166453

    Hey!

    I used ‘hide-class’ as an example, you’ll need to define your own class.

    Best regards,
    Josue

    #166661

    Definitely, I did do that. Trouble is, it seems that doesn’t work to target the entire directory (all the portfolio pages in “work” – so, do I have to do this for every individual page or is there a smart way to target the entire directory automatically?

    #166684

    Hello!

    Please post the link where you are trying this.

    Best regards,
    Josue

    #166695

    http://www.getaltrd.com/work/virginmobile/

    and all the other portfolio pages linking from http://www.getaltrd.com/#work_section

    I tried the code you provided and first created a class for “work”, that didn’t work, so then I tried one creating a class for virginmobile (thinking I might just have to manually targeted every portfolio page – but that didn’t seem to work either, not to mention that would be a maintenance hassle every time I wanted to add a new page.

    Essentially, I only want the “home” button on all my portfolio work pages (like I did on the blog, with your help).

    Thanks in advance for your help. This is the last bug I have to finish before launching my site.

    #167008

    Hi!

    I’m a bit lost. You want to remove the “Home” menu on all portfolio pages?

    .single-portfolio .hide-home {
    display: none;
    }

    Regards,
    Ismael

    #167175
    #167221

    Hey!

    Try this code:

    .single-portfolio #menu-home li{
        display: none;
    }
    .single-portfolio #menu-home li#menu-item-983{
        display: block;
    }

    Best regards,
    Josue

    #167531

    that worked! thank you so much for your help

    #167534

    actually, this only works for desktop, but not mobile (using the flyout nav) – ugh.

    #167537

    Hello!

    Please try adding following code to Quick CSS

    .single-portfolio #mobile-advanced li { display: none; }
    .single-portfolio #mobile-advanced li#menu-item-983 { display: block; border-top: solid 1px #ddd; }

    Cheers!
    Yigit

    #167564

    Yes! This all works great on both desktop and mobile – THANK YOU GUYS!

    #167569

    Hey!

    You are welcome, glad we could help :) Let us know if you have any other questions

    Cheers!
    Yigit

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Enfold Bug In Main Nav’ is closed to new replies.