Page jump in menu

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.

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.

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.

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.

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

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

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.

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.

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;
}

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.

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%;
}

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.

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

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.