Nav Vertical Right - Scroll Question

BB Theme
1

Running latest version of BBtheme

I am exploring the Vertical Right Nav bar option. What I’m noticing is all of my anchor (id’s) are not aligning with top of the page. With the normal header the scroll would flush nicely with bottom of navbar. Now they scroll short about 100px or more from the top of the screen where the 2 column top-bar resides.

Also, when switching to Nav Vertical Right, my (#6) RSS icon falls down a block. When in “Nav Vertical Right” mode, the look on the iPhone 6s+ looks exactly the same as the standard horizontal nav (which I’m sure is what it should be doing) but the horizontal nav doesn’t drop my rss icon down.

Here is dropbox link for screenshots:
https://www.dropbox.com/sh/jr8jylurtptm0ve/AAAvre-WoR_R7bd2HM8LV3MHa?dl=0

Screenshots:

  1. One with site logo shows fallen rss icon from iPhone screenshot
  2. One with orange circle shows scroll termination point on iPhone. Shouldn’t be seeing 2 upper rows.
  3. Mac Browser showing scroll termination point short of top bar.
2

Hey Josh,

I tried recreating the top social bar issue on my local dev but I couldn’t. Would it be possible to ask for the URL of the site where this is happening to so we can check?

The issue with the other 2 is that we have set a default offset value for when the page builder smooth scrolls. You can adjust it via a JS code. Check the KB article below for more info.
http://forum.wpbeaverbuilder.com/knowledge-base/smooth-scrolling-buttons-icons-and-links/

You can place the code under Appearance > Customize > Code > JS Code. :slight_smile:

Ben

3

Hey Ben,

Having another icon issue in the same area…
I created a separate nav for the top-nav position with a “Contact US” link and a phone-number link with a phone icon.

I created the nav link in the button menu using:
<i class="fa fa-phone"></i> ###-###-#### within the Navigation Label box.

Looking at the screenshot “Safari on iPhone 6S+.png” you can see the phone floats to the top above the number.

Looking at the screenshot “Chrome on iPhone6s+.png” you can see the phone in its proper place.

Looks to be an issue only with iPhone Safari. The screenshots were both phone in landscape position so the screen had lots of width. The Safari browser had the phone out of place in both portrait and landscape position. iPhone Chrome had no issues in either position.
Dropbox: https://www.dropbox.com/sh/jr8jylurtptm0ve/AAAvre-WoR_R7bd2HM8LV3MHa?dl=0
URL: http://SolanoRepublicans.org
Let me know if you need access.

Thanks for the above response on the scroll issue.

4

Hey Josh,

Just letting you know we’re checking on this.

Ben

5

thanks!

6

Hey Josh,

I’m not quite sure why, but it looks like that menu item is being broken into two a tags on the iPhone 6…

https://www.dropbox.com/s/edba8dn93zytzlq/Screenshot%202016-03-28%2011.45.59.png?dl=0

I tried to recreate on my local install but wasn’t able to get the same result. However, this CSS should fix your specific issue…

.fl-page-bar-nav a {
	display: inline-block !important;
}
#menu-item-3271 a:first-child {
	padding: 0;
}
#menu-item-3271 a:last-child {
	padding: 2px 10px;
}

You might also try putting the phone number in the i tag like so…

<i class="fa fa-phone"> 707-422-5000</i>

Let me know if you have any questions about that.

Justin