OK downloaded, a free one page html5 template that uses Twitter Bootstrap - works fine, until I want to change a link in the top menu to go to another page. It doesn't work !
A little research suggests a z index issue - but I can't figure it out.
The menu is thus
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow fadeInLeft" data-wow-delay="0s">About Us</li>
<li class="animated wow fadeInLeft" data-wow-delay=".1s">Join</li>
<li class="animated wow fadeInLeft" data-wow-delay=".2s">Members</li>
</ul>
</nav>
And the site URL is http://merseytribe.co.uk/
Tried all sorts of things and it's driving me crazy !
Thanks, David
Try adding targe="_self" or target="_blank" to the anchor tag as per your requirement.
<a title="Sign up today for one free month trial at our gold club" href="http://merseytribe.co.uk/membership-register.html" target="_self">Join</a>
Join
Try this. it will work. because it is one page theme so all link is working with js. but it is absolute link.
Related
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
I am trying to use the orbit feature in foundation 5. The loader seems to work but images don't load. I've inspected it and the link to images seems to be fine and i seem to have all the up to date JavaScript files needed for it to work.
Any ideas?
http://jsfiddle.net/p7PXS/
<div class="row">
<div class="slideshow-wrapper preloader">
<ul data-orbit data-options="animation:fade;
pause_on_hover:false;
animation_speed:1000;
navigation_arrows:true;
bullets:true;">
<li>
<img src="img/bodymetrix.jpg">
</li>
<li>
<img src="img/highgate.jpg">
</li>
</ul>
</div>
</div>
You seem to be missing those files from your working directory.
When you add a web link it works fine.
I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I thought it best to just show you, so please find below a link to problem, currently on the development page of my website.
http://dev.cccit.co.uk/about-us/our-team/
As you can see the active dropdown seems to work along with the header being active in the nav bar as well, however when highlighting the nav select it is making the header appear darker and also not selecting the whole box (missing out the information section). It is probably easier to just see for yourself.... hover over About Us in the nav bar and you will see.
I thought initially this might be css related.... there is a separate css file for color selection which I have changed every option without any affect, and what makes me think this won't help is the strange way in which the whole menu is not changing when you hover. Please find a copy of the code below, bear in mind I'm using php for this section, but it also does the same thing regardless, so I have also changed the header for "Support" so that you can see it is doing the same thing.
I thought someone may have come across the same thing, if you need any more information or files, then please get in touch. Thank you in advance
`div class="container">
<div id="nav-wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="buttons-container">
</div>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="single"><a href="../index.php">HOME
<i></i>
</a>
</li>
<li <?php if($pageName == "About Us")echo " class='dropdown active' ";?> class="dropdown">
<a href='/about-us'>
ABOUT US<i></i>
</a>
<ul class="dropdown-menu">
<li <?php if($pageMetaTitle == "Our Team")echo " class='active' ";?>>Our Team</li>
<li <?php if($pageMetaTitle == "Philosophy")echo " class='active' ";?>>Philosophy</li>
<li <?php if($pageMetaTitle == "FAQs")echo " class='active' ";?>>FAQs</li>
</ul>
</li>
<li class="dropdown active">
<a href="/support">
SUPPORT<i>IT support for business</i>
</a>
<ul class="dropdown-menu">
<li>Support Packages</li>
<li>Service Level Agreements</li>
<li>FAQs</li>
</ul>
</li>
`
Remove the custom background colors you set have for the <i> tags.
Noticing the hover effects on Firebug, the colors don't match the hover effects of the parent element.
I have an issue with links for which their focus is jumping around.
The site is here: www.bikramyoga.cz
The links that are troublesome are in this HTML piece:
<ul id="sub">
<li id="mail">
chci zasílat novinky
</li>
<li id="fb_icon">
to se mi líbí
</li>
</ul>
When I first created the site the links worked fine, now not so much.
Any ideas where my CSS is messed up?
If you display your <a> as block, instead of inline-block it seems to work as you want.
#mail a{display:block}
#fb_icon a{display:block}