My logo vanishes when I try to add a hyperlink.
<header class="header">
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
<h1>header here</h1>
<nav>
<ul class="header-nav">
<li class="nav-item">
<a class="nav-link" href="../example-page/profile.html">PROFILE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">ABOUT</a>
</li>
</ul>
</nav>
</header>
With this I was expecting to see my logo. The link is clickable however whatever photo I replace it with it vanishes.
Related
I want the social media icons at the right side above my navigation bar, but when I float them at the right it blends in with the navigation bar, can someone help?
I already tried the positions fixed and absolute, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Branco</title>
</head>
<body>
<header>
<div class="container-fluid">
<div style="align-content:right" class="social-icons float-right">
<a href="https://www.instagram.com/brancoschoenaker/" target="_blank">
<img src="assets/instagram-icon.png">
</a>
<a href="https://twitter.com/SchoenSchaap" target="_blank">
<img src="assets/twitter-icon.png">
</a>
<a href="https://www.reddit.com/user/LilPutje" target="_blank">
<img src="assets/reddit-icon.png">
</a>
<a href="https://www.youtube.com/channel/UCw2amewef_lsD1sU8X5mhjw?view_as=subscriber" target="_blank">
<img src="assets/youtube-icon.png">
</a>
</div>
</div>
<nav class="navbar navbar-light bg-light" >
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<h1>Branco</h1>
</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active nav-text" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active nav-text" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link active nav-text" href="mailto:brancoschoenaker#gmail.com">Contact</a>
</li>
</ul>
</div>
</nav>
<header>
</body>
</html>
So, i want the social media icons top right (and yes i'm going to make them smaller
<div style="align-content:right" class="social-icons float-right">
find the above line in your code and replace it with below given line of code.
<div style="text-align: right" class="social-icons">
Trying to make my mobile navbar not coming out quite right. Anyone see the problem? I have only a couple months experience, need a quick hand of help. Much appreciated!
As you can see it doesnt display the navbar right at all. The contact page isnt clickable.Its missing the Services link
*******************
NAV MENU MOBILE
*******************
-->
<div class="menu-wrap mobile">
<div class="container">
<div class="row">
<div class="col-sm-3 no-padding">
<img src="img/logo.png" alt="logo" class="logo-menu">
</div>
<div class="col-sm-9 col-lg-7 col-lg-offset-2 no-padding">
<nav class="nav-menu">
<button class="menu-toggle">
<span class="icon"></span>
<span class="icon"></span>
<span class="icon"></span>
</button>
<ul class="main-menu">
<li class="menu-item active menu-item-has-children">
Home
</li>
<li class="menu-item menu-item-has-children">
<a>Hosting</a>
<ul class="sub-menu">
<li class="menu-item">Shared Hosting</li>
<li class="menu-item">Reseller Hosting</li>
<li class="menu-item">Cloud VPS</li>
<li class="menu-item">Dedicated Server</li>
</ul>
</li>
<li class="menu-item">
Domains
</li>
<li class="menu-item menu-item-has-children">
<a href="blog.html>Blog</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="services.html>Services</a>
</li>
<li class="menu-item menu-last">
<a class="menu-item" href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
navbar
<a href="services.html>Services</a>
should be
Services
You left out the second ".
In those two links...
<a href="blog.html>Blog</a>
<a href="services.html>Services</a>
...the closing quote of the hrefattribute is missing. Should be
Blog
Services
I am currently working with foundation 5 and ultimately trying to make my page mobile friendly. I have a top navigation bar that I have created for the page following some of the basic structures. The navigation bar has problems being responsive. It does not display a menu at a all when I resize smaller the screen. How can I get the navigation bar to be responsive?
HTML:
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a>
</nav>
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
Title
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test</a>
<ul class="dropdown">
<li>
SubTest
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test2</a>
<ul class="dropdown">
<li>
SubTest2
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test3</a>
<ul class="dropdown">
<li>
SubTest3
</li>
</ul>
</li>
</ul>
</section>
</nav>
You have given it the class .hide-for-small for the main one which holds all of the dropdowns.
Then the one that is viewable by mobile, you have no data inside of it.
Add the <a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a> to the other nav.
Refer to this page here to get a proper responsive topbar.
I am having a issue with getting my bootstrap to work with a site I am designing for a friend.
<nav class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/" style="width: 240px;">
West Coast Refuse Trucks
</a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="index.html" class="active">
Home
</a>
</li>
<li>
<li>
<a href="about.html">
About
</a>
</li>
<li>
<a href="firstgear.html">
First Gear
</a>
</li>
<li>
<a href="/play">
Uploads
</a>
</li>
<li>
<a href="/forums">
Refuse Community
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
I am not sure what is preventing it from highlighting in my page on my site. Home shows up as usual. Any help?
Assuming that you are using Bootstrap 2.3.2, you suppose to add active class to <li>, not to <a>.
<ul class="nav">
<li class="active">
Home
</li>
<!-- ... -->
</ul>
Demo: http://bootply.com/97634
I'm making a portfolio page here (http://198.96.94.51/v2/) and while clicking on the navigationMenu links on the side really fast, they don't seem to redirect to the proper anchor (some of them don't move the page at all). I've initialized my anchor tags like this
<ol class="curtains">
<li id="home" class="cover">
<a id="home"></a>
<header data-fade="550" data-slow-scroll="3">
<h1>John Smith</h1>
<h2>HOBBY/JOB TITLE</h2>
</header>
</li>
</ol>
My navbar code -
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="projects" href="#projects">
<span>Projects</span>
</a>
</li>
<li>
<a class="resume" href="#resume">
<span>Resume</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
But just clicking on the navbar, or even typing #home into the address bar won't bring the browser back to the top sometimes. Is there anything I'm doing wrong?
Ids identify anchor points so they must be unique.
But if you just want to go to the top of the page you should try a simple # as value for your href attribute.
A link to the id of e.g. a <div> tag would lead you to this <div> tag.
<div id="anchor"></div>
this fiddle shows you: http://jsfiddle.net/aYGFR/1/
You can give like this: <a id="home" href="home.php">Home</a>