0
Welcome Guest! Login
0 items Join Now

Large width nav drop-down going off screen

Last Post
Search Topic
    • Dave's Avatar
    • Dave
    • Rocketeer
    • Posts: 85
    • Thanks: 2
    • Print, Web & SEO

    Re: Large width nav drop-down going off screen

    Posted 10 years 8 months ago
    • Reggie thanks. You can disregard the Acacia demo site - I was just using it for reference. If you look at the domain root, that is my Website. I wanted drop-downs on the last menu, Contact, but was reluctant due its appearance going off-screen.

      Can I get help with the main site? URL is under the Secure tab.

      Thanks.
    #1081830

  • Re: Large width nav drop-down going off screen

    Posted 10 years 8 months ago
    • Alright, so let me give you a hand here. So let's take the Website Design dropdown for instance. It's a bit snug on the right in the tablet view, so let's move it over using:
      /*Tablet*/
@media (min-width: 768px) and (max-width: 959px) { 

.gf-menu li.item1851:hover > .dropdown, .gf-menu li.active:hover > .dropdown {
	
	left: -30px;
}

}


      So the media query makes the CSS override specific to the Tablet view. So with the future Contact dropdown use the same code except using a different menu item # and let's move it more to the left. Contact is item1847 (you can view the item numbers in the HTML). So we have:
      /*Tablet*/
@media (min-width: 768px) and (max-width: 959px) { 

.gf-menu li.item1847:hover > .dropdown, .gf-menu li.active:hover > .dropdown {
	
	left: -90px;
}

}

      The more negative we go, the farther away we are from the right it seems. You can adjust that number accordingly.

      Also, if it appears snug in the Desktop view, use the Desktop media query as well:
      /*Desktops*/
@media only screen and (min-width: 960px) and (max-width: 1199px) { 
    
    .gf-menu li.item1847:hover > .dropdown, .gf-menu li.active:hover > .dropdown {
	
	left: -90px;
}

}
    • Last Edit: 10 years 8 months ago by Reggie Simmons.
    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1081844
    • Dave's Avatar
    • Dave
    • Rocketeer
    • Posts: 85
    • Thanks: 2
    • Print, Web & SEO

    Re: Large width nav drop-down going off screen

    Posted 10 years 8 months ago
    • Hey Reggie. The dreaded response - it did not work. And I was hoping for a more dynamic solution like the links I posted to your older theme.

      I added a longer sub-menu to the Contact drop-down, "Frequently Asked Questions" - it looks fine on my 16:9 - 23 inch but using the Chrome extension "Window Resizer" and changing to 1024 x 768 (tablet), the sub-menu again disappears off to the right.
    #1081853

  • Re: Large width nav drop-down going off screen

    Posted 10 years 8 months ago
    • You most likely need to adjust the value and play with it.

      As for a more dynamic solution, I plan on speaking with some of the other developers about this, but this may not be implemented for some time. For now all I can provide you with is a personal CSS fixes.
    • Last Edit: 10 years 8 months ago by Reggie Simmons.
    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1081875
    • Dave's Avatar
    • Dave
    • Rocketeer
    • Posts: 85
    • Thanks: 2
    • Print, Web & SEO

    Re: Large width nav drop-down going off screen

    Posted 10 years 8 months ago
    • Sorry I had to remove the FAQ link because the site is now live and the page still contains Rockettheme demo data. I'll practice implementing your code on a local server until I feel it works properly. Of course a dynamic solution would be ideal so additional menus links can be added without manual coding.

      Above all please accept my gratitude - I understand you folks are under no obligation to provide custom coding assistance.

      Dave.
    • Last Edit: 10 years 8 months ago by Dave.
    #1081878

  • Re: Large width nav drop-down going off screen

    Posted 10 years 8 months ago
    #1081880
    • Dave's Avatar
    • Dave
    • Rocketeer
    • Posts: 85
    • Thanks: 2
    • Print, Web & SEO

    Re: Large width nav drop-down going off screen

    Posted 10 years 7 months ago
    • Reggie Simmons wrote:
      You most likely need to adjust the value and play with it.

      As for a more dynamic solution, I plan on speaking with some of the other developers about this, but this may not be implemented for some time. For now all I can provide you with is a personal CSS fixes.

      Reggie, should I just write this one off as a loss? As I mentioned I tried your suggestion but am still stuck with sub-menus at the far right extending off-screen.

      Would be a shame though if I can't get this resolved as it's been a blast working with every other aspect of the Gantry framework - simply top-shelf compared to any other theme provider.
    #1086994

  • Re: Large width nav drop-down going off screen

    Posted 10 years 7 months ago
    • Hello Dave,

      I spoke with the developers and unfortunately, it doesn't appear we can provide a dynamic solution using a CSS menu as we do. Nevertheless, I'd be happy to look at any specific menus you need assistance with.
    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1087026

Time to create page: 0.054 seconds