I need to put a margin in front of all hyperlinks an book marks within a Page.
When I jump to a bookmark or hyperlink within a page the link starts underneath the floating menu bar at the top of the page. I need to have the link down a few lines. Is there a CSS code I can use to make this happen.
I do not want to link to something 2 lines above if I don’t have to;
http://whynotchooselife.com/index.php/romans-chapter-5-proof-of-concept/
Hi there,
I actually did not understand what you mean unfortunately and the link you provided just leads to this page:
Please kindly provide a correct link and a screenshot of the section you have a problem and give us exactly what you want to do with the links so that we can understand the issue and try to suggest solutions.
Thank you.
Sorry was editing pages and moved it back to a draft.
http://whynotchooselife.com/index.php/romans-chapter-5/
I link to the “Additional Notes” which makes the page jump down to a book mark further down in the Page.
Then when you click on “Return” the bookmark jumps back up to the text.
Since these are internal hyperlinks, they put the bookmark at the top of the page which is underneath the Menu bar, I need to put a margin above where the book mark jumps to see pics:
Hi There,
Thank you for the clarification. I can see you are using Pro Fixed Top headers. Currently on Pro, smooth scrolling of same page link is working but then sticky bar height is not yet accounted. This feature is still under development together with One page navigation. For the mean time, see this thread: https://theme.co/apex/forum/t/pro-header-top-sticky-bar-goes-behind-second-bar-on-scroll/2623/3
Hope this helps.
The sticky Bar is not the problem, it works just like I wanted.
What I need is CSS to put a Margin in above a Hyperlinked BOOKMARK, that way when I jump to the bookmark the margin will push the bookmarked word down below the stick bar.
In the Pictures above the bookmark is on the V1-2 in the first picture, when you jump to the bookmark it comes up underneath the sticky bar. What I would like to have is the second picture where there would be a margin applied to all bookmarks and hyperlinks globally to add a padding from the top of the page to where the bookmark or hyperlink comes up on the page.
Thank you for your interest and help,
James
Hey James,
I checked your setup and I see you’re using an outdated version of Pro, can you please update you theme to latest version first? You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.
If you find anything to be out of date, you can review our update guide.
Thanks!
Thanks Nabeel
I’ve updated and still have the same problem!
Hi again,
Please try adding the following code in the Theme Options > JS:
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-masthead .x-bar.x-bar-top.x-bar-fixed').outerHeight();
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
console.log($('.hm1.x-bar-fixed').outerHeight());
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
animateOffset($el, 850, 'xEaseInOutExpo');
}
}
});
});
Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!
Thanks but pasting this into the JS section does not do anything noticeable
James
Hey James,
Try replacing the previous code with the following code:
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-masthead .x-bar.x-bar-top.x-bar-fixed').outerHeight() + 15;
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
console.log($('.hm1.x-bar-fixed').outerHeight());
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
animateOffset($el, 850, 'xEaseInOutExpo');
}
}
});
});
This code will add some spacing to the linked section when you click on the “Additional Notes” hyperlinks. Please clear your browser’s cache after adding the code.
Hope this helps!
Thanks, that works good when we are jumping back up from the “Return” to the verse {V2, V3, V4, Etc}
However, when I’m linking from the “Additional Notes” down to the {V2, V3, V4, ETC} down at the bottom I’m still getting the verses underneath the tool bar?
Thanks again for the help
James
Hey James,
You can try out the following code:
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-masthead .x-bar.x-bar-top.x-bar-fixed').outerHeight() + 35;
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
console.log($('.hm1.x-bar-fixed').outerHeight());
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
animateOffset($el, 850, 'xEaseInOutExpo');
}
}
});
});
Feel free to adjust the offset 35 in the following line provided above:
$('.x-masthead .x-bar.x-bar-top.x-bar-fixed').outerHeight() + 35
Hope this helps!
Fantastic Had to change the 35 to 50 but that will work perfect!!
Thanks
You’re more than welcome, glad we could help.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.