So, I'll try to keep this short. I am making a navigation and I want my logo to act as the homepage link. Like this:
However, I'm having trouble with it. Any help would be appreciated!
Code at codepen:
`http://codepen.io/aaronmtx/pen/NRYqOm`
Is the codepen for an example or is that the site you are talking about that should be working?
To make a logo a homepage link you just put an href around the image and set the path to "/".
Example:
<img src="images/example.jgp" />
In your codepen, the # sign in the links is a standard kind of "change me later with the right path" symbol that just links to the top of the current page. You need to change all of those to be a path. / is your root or home page. Anything after that will navigate to other pages.
So you will end up with / for the home page, /services or /services.html etc. depending on your folder and file names.
<nav>
<ul>
<li class="nav-logo"><img src="http://baseframe.co/a/img/White-B.png"></li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
This would make the image a link and upon click it would navigate to the root. Obviously replace your image with the correct logo path.
If that doesn't help, can you clarify by adding your code with file names and folder structure?
Hope this helps!
Related
I set a tag to a local path it works normally on my computer BUT when I deploy it using GitHub pages services the images don't load at all
here is the code:
<ol>
<li>Go To Apperance > Menu</li>
<li>Create a new menu by clicking on create a new menu</li>
<img src="./images/social1.PNG" width="80%" alt="Social Icons">
<li>Add your menu items as <strong>Custom links</strong> in left side menu</li>
<img src="./images/social2.PNG" width="80%" alt="Social Icons">
</ol>
You should change src="./images/socialX.PNG" either to an absolute path or given that you opt for relative paths and under the assumption that the images directory is placed inside your website's repository, then its name should be prepended to form the final relative path src="/repo_name/images/socialX.PNG".
I checked your repository.
Your used relative path correctly, but you missed spell.
In URL, case is sensitive. Your folder name is "Images", but you tried "images", That's why your code not working.
For example, Try https://ryadh020.github.io/HireMe-theme-doc/Images/front1.PNG instead of https://ryadh020.github.io/HireMe-theme-doc/images/front1.PNG.
Please make sure you upload the images as well.
and the link URL is accurate to its file, (I am not sure where the dot is referring, maybe try removing it or add two dots).
Hope you found this helpful :)
I put a link to a wikipedia page through this line of HTML :
<div class="voiraussi">
<h2>Voir aussi</h2><br>
<ul>
<li>Biographie d'Alan Turing</li>
<li>ARPANET, ancêtre technique d'Internet</li>
</ul>
</div>
Those two links work on one of my pages (i have 5 .html files) but on the others, it doesn't work at all, i have no idea why. Those lines above are part of the footer of my website, i copy/paste the footer on all the pages, so i don't understand. I checked on the existing posts but didn't find anything that could help...
Thanks in advance !
From what I understand after looking at your comments and the question, you have some sort element overlayed on the links on the pages where the links are unresponsive. One quick hack to check if this is actually the issue would be to give one or both the links a greater z-index. Try this:
<div class="voiraussi">
<h2>Voir aussi</h2><br>
<ul>
<li><a style="z-index:100" href="https://fr.wikipedia.org/wiki/Alan_Turing" target="_blank">Biographie d'Alan Turing</a></li>
<li><a style="z-index:100" href="https://fr.wikipedia.org/wiki/ARPANET" target="_blank">ARPANET, ancêtre technique d'Internet</a></li>
</ul>
</div>
the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.
I use AngularJS 4,
And I have Components, every of them has a relationship to the menubar.
The menubar and home is pre-loaded in root component.
What I'm going to do is to make menubar navigation link changes the content in home (Particularly said that home component will changed to another component).
Now, the problem is, the link didn't work, it doesn't change anything. The home can't be changed.
app.component.html
<main>
<app-menubar></app-menubar>
<app-home ng-include="template"></app-home>
</main>
menubar.component.html
<ul>
<li><img src="src/news.svg" alt="news"><span>Home</span></li>
<li><img src="src/contact.svg" alt="contact"><span>Contact</span></li>
<li><img src="src/about us.svg" alt="about us"><span>About</span></li>
</ul>
Have you looked into the Angular-Tutorial? this one is for Angular 2, but it should still cover everything you're trying to do.
For this, you would use a router-module (which you will almost always use in Angular, it's pretty cool)
The steps are as following:
set up the router-module
insert your links (for each page, a relative link with the component for it)
replace your links in menubar.component.html with:
<a routerLink="/welcome-page">Welcome</a>
don't Forget to also include a tag as following: <router-outlet></router-outlet>
this tag will contain all the page-source and is where Angular maps the router-links to
Once you get it, it's really easy and convenient
I am playing around with an HTML template. I made a un-ordered list that enables the visitor to choose between two languages. Within it, i placed an anchor tag, and within the tag an image corresponding to chosen language, accompanied by some text. Though i have don't this before, for some reason, when i try to test the page on Firefox or Chrome the anchor tag won't work. Any suggestions? Thank you in advance for your time.
Code:
<div class="polyglot-language-switcher" style="margin-top:10px;float:right;">
<ul>
<li style="display:inline;margin-right:2px;"> English (US)</li>
<li style="display:inline;"><img src="images/gr.png" alt="Greek"> Ελληνικά</li>
</ul>
</div>
EDIT:
I do not know, if this has any value, but i initially copied the code from this site http://www.ixtendo.com/polyglot-language-switcher-2/. But i only copied the HTML bit.
Just Download the Zip file from this link
https://github.com/ixtendo/Polyglot-Language-Switcher/archive/master.zip
and extract it and open the index.html file.... that is what you want.