In my google account, for example, when I click their youtube icon, it opens youtube in a browser tab. Is it allowable/possible to have icons open as tab of a tab bar within the html body, directly below the browser bar, having the code of the site of whatever icon is clicked begin a few lines lower?
Having a navigation bar on the top of your page is as follows:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">My Awesome NavBar</a>
</nav>
If you meant having links to other pages openning in a new tab in your browser there is an attribute called target to an <a> element, if you give it the value _blank it opens the link in a new tab
So your navbar should look something like this:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">My Awesome NavBar</a>
<ul>
<li>
Youtube
Google
Facebook
</li>
</ul>
</nav>
Hope that answers your question, let me know if it doesn't :)
EDIT:
If you're trying to achieve these sites displayed within your site and keep the bar presented above you might want to take a look at iframe documentation which basically is having another document (html page) within yours
Related
I have an html navigation bar with three options available (homepage, page 1 and page 2). I don't want endlessly clicking on hyperlinks to open up endless tabs in the history. I'd rather have at most all three tabs open in my story, or the homepage plus the last page opened.
I've tried working with window.location.replace but it doesn't seem to work.
I attach the html code of my navbar:
<nav class="menu">
<ul>
<li><a onclick="document.location='index.html'">Home</a></li><!--
--><li><a onclick="document.location='educazione_civica.html'">Educazione Civica</a></li><!--
--><li><a onclick="document.location='materie.html'">Materie</a></li1>
</u>
</nav>
I'm creating my portfolio website and I'm having some issues with any anchor tag within my navigation. When I hover over the link, it appears correctly, but nothing happens when I click on it. Both html pages are in the same folder (although I'm not getting a typical page not found error anyway). Here is an example of a link the the homepage through the logo:
<a class="navbar-brand" href="index.html" style="padding-top:2px;">
<img src="logo.svg" alt="" width="190px" style="padding:0px"/>
</a>
Here is another example within the menu, where I'm linking to the use-cases section of in the homepage:
<ul class="nav navbar-nav navbar-right">
<li>CASE STUDIES</li>
</ul>
UPDATE:
The issue was being caused by an event listener that changes the default behavior of the code. In this case I was using the following event listener:
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
I am currently teaching myself HTML & CSS, I have bought many books online (hardly read) and I am running into more and more problems. Luckily I have StackOverflow and since you guys helped me out with my last question I thought I should come back and ask another.
All this troubleshooting makes it harder to actually achieve my goal but I am in it for the long run.
I try to write code for at least 2 hours a day while watching tutorials at night. That's my schedule. Once I become more confident in what I am doing then I will put more hours into it.
It's hard to get into the learning process in the beginning, but I know if I keep working hard then anything is possible
So let's solve this,
Thank You!!!!
Youtube Tutorial
timestamp reference 10:00 - 12:00
Screenshot of Icon
Code:
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/gooch/assets/pics/Logo.png"><img src="/gooch/assets/ illustrator/1.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
I wanted my logo to appear inside the Navbar.
It could just be a syntactically error in the html? There seems to be a space in your src attribute. If that doesn’t fix it, there is probably an issue in your stylesheet.
Lack reputation to comment so will say it here.
Try to use developer tool of your browser to see the error about your icon
https://i.stack.imgur.com/o5kvH.png
then head to "Console" tab
https://i.stack.imgur.com/2dhWE.png
you can see here if the image file is missing.
I am trying to link an image to a website i'm building but i am having trouble linking the img. It's on my desktop and i believe i've taken the right steps, but i keep getting a "broken image symbol". Please take a look at the code and let me know if anything is wrong.
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
</div>
<div class="container">
<div class="navbar-header">
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')">
</div>
<div class="row">
<!-- insert rows here -->
</div>
</div>
</div> <!-- End of Container -->
</nav> <!-- End Nav Bar here -->
Ok first moan - indent your code (unless its just from copying and pasting into SO and it messed the format, in which case - sorry for the moan xD)
I have a feeling, the image isn't showing because it's 404'ing - if you open up the browser console / firebug it should show you if it's 404'ing
secondly, you're using images src correctly but is the file structure? Should be something like:
html
index.php
somepage.php
img
img1.jpg
img2.jpg
this means that if you called img in index.php like:
<img src="img/img1.jpg" class="some-class" id="some-id" />
it should show - let me know if it works :)
(notes)
don't have to be a .php file - tis just what I'm used to
You are not closing your tag properly! Do this:
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')"/>
Also, make sure that your path is correct, you are using a relative path for your project. Can you post your project structure?
So, I am building this website for my class and the professor suggested that I should place my logo on the top left corner of my website. I have the transparent PNG and I have tried to do place it (instead of Soundwave Records as the title I want to insert my logo). I have tried to do it, but it didn't work. Ideally, whenever the user clicks on the logo, it redirects him to the HOME page.
This is the current coding for the header:
<header role="banner" id="home" class="site-header">
<div class="container container--max">
<h1 class="site-header__title">
<a href="#home" data-scroll>Soundwave Records</a>
</h1><!-- end .site-header__title -->
Also, the image seems to be too big even though I have tried to resize it with Photoshop... Can't figure it out!
And this is my website: http://gabrielr.sgedu.site/final-project
Any tips/help?
Seems to work fine for me..
<h1 class="site-header__title">
<img src="http://placehold.it/350x50">
</h1>
If you want it to redirect to the homepage instead of a datascroll element just change the href= to http://gabrielr.sgedu.site/final-project and remove data-scroll