Home>Support>Page jump in menu

Page jump in menu

Hello,

I have try many things but results are not expected.
I have a page build with PageBuilder, I’ve put id for make page jump into this page. And I want in the menu when I hover the page see the second menu with my links for my page jump.

Thanks you.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Hi Markgate

    Thanks for reaching out.

    Here is the official help docs on page jumps:
    https://en.support.wordpress.com/splitting-content/page-jumps/

    If you’d like specific help with one, please send through a link to your site and let us know which section you’re jumping to, we can try help from there.

  2. 6 years, 4 months ago markgate

    Yes I know that but how I can i see my jump section into the menu ?

    I’m working on localhost so I can’t give you a link.

    But this is a capture.
    I want when I put my cursor on Test in the navbar a submenu with the name of my jump sections Test1 and Test2

  3. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Navigate to Appearance > Menus, add a Link item to your custom menu and insert as the url:

    #my-anchor-1

    Replacing my example ID with yours.

    Let us know how you come along.

  4. 6 years, 4 months ago markgate

    Thank you very much Andrew.
    But I cant put Page Jump in the title of a text widget in Page Builder :(

  5. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Widgets in general unfortunately don’t parse HTML. If you inspect the page source though you’ll see Page Builder outputs ID tags. You can use any of the div or widget ID’s around the title.

  6. 6 years, 4 months ago markgate

    Thank you it’s better. Now I have the good part but not the title :/
    But it’s working.

  7. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    You could try using an ID above the title.

    Or, if it’s a Visual Editor widget you could leave the title blank and insert your widget heading in the body.

  8. 6 years, 4 months ago markgate

    But as you can see :

    <div id="pg-29-0" class="panel-grid">
        <div id="pgc-29-0-0" class="panel-grid-cell">
            <div id="panel-29-0-0-0" class="so-panel widget widget_text panel-first-child">
                <h3 class="widget-title"></h3>
                <div class="textwidget"></div>
            </div>
            <div id="panel-29-0-0-1" class="so-panel widget widget_text"></div>
            <div id="panel-29-0-0-2" class="so-panel widget widget_text"></div>
            <div id="panel-29-0-0-3" class="so-panel widget widget_text"></div>
            <div id="panel-29-0-0-4" class="so-panel widget widget_text"></div>
            <div id="panel-29-0-0-5" class="so-panel widget widget_text"></div>
            <div id="panel-29-0-0-6" class="so-panel widget widget_text panel-last-child"></div>
        </div>
    </div>
    

    I take the ID of one part id=”panel-29-0-0-0″ for example so it’s including the h3 widget title but it don’t care when I use jump page

  9. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Please send through a link to your site and we’ll take a look. Thanks.

  10. 6 years, 4 months ago markgate

    Hello, I’m sorry for the time to respond but i’ve just put the site online,
    this is the link : http://www.celduc-transfo.com/
    Thanks for your help

  11. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Good to hear from you. Sorry if I’m missing it. Can you please confirm where I can find your page jump link/s?

  12. 6 years, 4 months ago Private Message - markgate

    This is a private message.

  13. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    It might be worth trying a plugin like: https://wordpress.org/plugins/easy-smooth-scroll-links/. It has the option to set an offset value. Your menu height is 80px, try using that value or a bit more as the offset value.

  14. 6 years, 4 months ago markgate

    Thanks I’ll try it. And did u know how I can change submenu size ? In fact the height is too high, and the hover don’t take all the case :/ (width: 100%) doesn’t work

  15. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Try the following at Appearance > Custom CSS:

    /* Drop down menu item padding, top and bottom */
    
    .main-navigation ul ul a {
    padding-top: 20px;
    padding-bottom: 20px;
    }
    

    Adjust as required.

  16. 6 years, 4 months ago markgate

    It’s not working :/

  17. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Looks like you’re setting a height of 80px in Custom CSS so we’ll need to undo that. Try changing my earlier rule as follows:

    .main-navigation ul ul li {
    height: auto !important;
    line-height: normal !important;
    }
    
    .main-navigation ul ul a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    }
    
  18. 6 years, 4 months ago markgate

    I’ve tried it too but same, not working.

  19. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    I’m not seeing the Custom CSS above in your source code. Is it saved in Appearance > Custom CSS? If so, please clear the cache in WP Super Cache settings.

  20. 6 years, 4 months ago Private Message - markgate

    This is a private message.

  21. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Here we go :)

    .main-navigation ul ul a {
    	font-size: 13px !important;
    	line-height: normal !important;
    	padding-top: 10px !important;
    	padding-bottom: 10px !important;
     
    }
    
    .main-navigation ul ul li {
    	height: auto !important;
       	width: 100%;
    }
    
  22. 6 years, 4 months ago Private Message - markgate

    This is a private message.

  23. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    In your Custom CSS are two rules with 80px values. One targets the main navigation and another main navigation list items. Remove both and adjust height with padding rather.

  24. 6 years, 4 months ago Private Message - markgate

    This is a private message.

  25. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    Sure :)

    If you can locate the flag icons you’d like to use then this can be done using the Menu Icons plugin:
    https://wordpress.org/plugins/menu-icons/

    When editing an item you can choose to hide the label and upload your own image.

    http://www.famfamfam.com/lab/icons/flags/
    http://www.icondrawer.com/flag-icons.php

  26. 6 years, 4 months ago markgate

    I’ve remove the two 80px and try to adjust the height but it doesn’t want, i can make more pixels when I hover but not like the height of my menu :/

  27. 6 years, 4 months ago Andrew Misplon Hi, I Work Here

    There is a fair but happening here, I’ll try help you resolve.

    1. Remove this from Custom CSS:

    nav.site-navigation.main-navigation {
      height: 80px;
    }
    

    2. Go to Appearance > Editor > style.css and locate this rule:

    .main-navigation ul li a {
      margin-top: 0px;
      padding-top: 0px;
      padding-bottom: 80px;
     line-height: 4.6em; 
      padding: 20px;
      -ms-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    

    Changes to style.css won’t survive a theme update. Please restore this rule back to its default:

    .main-navigation ul li a {
      padding: 20px 35px;
      line-height: 1em;
      -ms-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    

    3. Go to Appearance > Customize > Theme Design > Menu > Menu Item Padding: Set your desired menu item padding.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More