Hi cant seem to get my Anchor links working in Safari...
<li class="nav-item"> <a class="nav-link" href="resources.html#copy" target="_top">Resources</a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html#copy" target="_top">Contact</a> </li>
I have a bunch of links that go to their respective pages and then should drop down to the "copy" anchor but this doesn't work in safari...
As you can see I've specified a target which i was told should help... I have tried changing my links to "page.html/#copy" but this doesn't work. i have also used ID as name is no longer used in html 5.
my anchor looks like this...
<h1 id="copy" class="-white">.</h1>
class just makes the text white so cant see the '.' on the page.
.-white{
color: #FFF;}
im assuming it's something simple and I've just been staring at this to long to see it...
Thank you
Related
I've just created the bootstrap navbar on my website and I have the trouble with my url...
For example I have something like this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#about">
About
</a>
</li>
</ul>
</div>
And my website url looks like this: "something.html#about"
I would like to remove the #about from the url. I read that I should remove? the href from this li item, and put the #about in data-target but it doesn't work for me. What is the easiest way to fix this? Thanks for any respond.
you can use data-target instead of href. It will help you to get rid of #about from the browser URL.
So instead of
href="#about"
use
data-target="#about"
I assume you are a beginner in HTML and how web pages work.
The href attribute of the HTML element a(nchor) defines the hyperlink. The "#something" points to an ID within a HTML web page. It is accessible by the JavaScript on the specific page.
In this case, your href points to the current page as no other page is referenced (the href has nothing like href="otherPage.html#about").
It might be needed by the bootstrap framework. There is nothing wrong with it. Embrace it, it is part of the internet and how browsers work.
I have a bootstrap 4 navbar that works well except for one link. The link to the "trainee-portal.php" does nothing on click. Here is the code.
<li class="nav-item dropdown" style="padding: 10px 15px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="trainees">Trainees</a>
<div class="dropdown-menu">
<ul>
<li><a id="authorRegistration" href="<?php echo site_path(); ?>author-registration.php" class="pseudologin dropdown-item">Become an author</a></li>
<li><a id="editUserRegistration" href="<?php echo site_path(); ?>user-registration.php" class="pseudologin dropdown-item">Edit my profile</a></li>
<li><a id="learnerProgress" href="#" class="pseudologin dropdown-item">Resume my cases</a></li>
<li><a id="learnerPortal" href="<?php echo site_path(); ?>trainee-portal.php" class="pseudologin dropdown-item">Trainee Portal</a></li>
</ul>
</div>
</li>
The href is correct because it works on all the other links in the unordered list and because I can right-click the item and open "trainee-portal.php" in another tab. I have tried removing the classes and even changed the class dropdown-item to nav-link. It looks different but nothing happens on click. I changed the position in the list. Nothing. I removed the php code in the href to make the link relative. Nothing. I retyped the link with another id. Nothing. BTW pseudologin is simply to open the login form if the user has not signed in. It works but I also tried removing it. Nothing. Am I missing something obvious?
While I am waiting for your input I will use javascript to navigate but that defeats the purpose of href.
Thanks in advance for your help.
Does it open if you put the "Resume my cases" link at the very bottom of your list? If so, I would go into the Inspect > Network section of my browser and see if there's something on my paging blocking it.
I want the current page to be coloured with green background
Here my code
My css
a.current:active{background:green;}
Now. My html
<a class="current" href="/">Home</a> /
<a class="current" href="about">About</a> /
<a class="current" href="contact">Contact</a>
But it does not work assist me on this pls
"The :active selector is used to select and style the active link.
A link becomes active when you click on it."
What you should do is instead of using ´current´ class for all links, just use it for the current page like this
<a class="current" href="/">Home</a> / About / Contact
With a css containing sonething like this
a.current {
background: green;
}
Use the "current" class for current page link.
It's my first time making site, what should I do to have my site logo above the navigation bar? And if someone could correct my code and tell my what I did wrong.
www.codepen.io/anon/pen/VaPKaK
You're missing a space between "home" and style in your image tag
It's a bit confusing what you're asking, would you like your logo image to literally appear above your navigation? if so the don't put the image tag in an a list tag
So instead of:
<li id="home"><a class="active" href="#home"><img src="home.png" alt="Home"style="width:20px;height:20px;"></a></li>
<li id="news">Blog</li>
TRY
<a class="active" href="#home"><img src="home.png" alt="Home" style="width:20px;height:20px;"></a>
<li id="news">Blog</li>
Also, try not to add styles to your html. Put them in your CSS. It makes it all much easier to read.
Here is the edited Codepen with all those edits and the logo is above the Navigation.
Hope that helps!!
I am using Twitter Bootstrap for a project.
I have a widget type list-group, which is a list of elements that are used for navigation.
For some reason I can't make those links to work. Although the correct link appears when hovering, they don't take me there.
I created a fiddle to ilustrate the problem.
Can anyone help?
Regards.
When you specify http in the link it will not work in an https site.
Have a look at Bootstrap's documentation for list-group. When I put your links into a UL, things seem to work:
<ul class="list-group">
<li><a
href="http://www.google.com"
class="list-group-item active"
>External link not working</a></li>
<li><a
href="#my_local_anchor"
class="list-group-item active">
Internal link not working
</a> </li>
</ul>
I checked the internal link and it worked when yo use your anchor as an ID
<h1 id="my_local_anchor">
And the external link worked when I added:
<a href="https://www.google.com" target="_blank">
Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser
Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).
As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.
Plus the list group should be in a LIST not a bunch of divs