Okay so I have a nav bar for my website and I have never ran into this issue. All my text goes right behind my nav bar and not under. It could be because my navbar is made to auto adjust for mobile screens.
<body>
<nav>
<h1 class="brand">CHS Robotics</h1>
<ul>
<li>Club Info</li>
<li>The Team</li>
<li>Positions</li>
<li>News</li>
<li>Donate</li>
<li>Sign up</li>
<li>Login</li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">CHS Robotics</h3>
<h4 class="menu">Menu</h4>
<div style="clear: both"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
<h1 class="about">About CHS Robotics</h1>
More info: Cyrusmusic101.github.io
I suggest you clear your cache, since there's nothing wrong with the code and it seems perfectly fine when I access the link.
(Also, if something were wrong it would probably be the CSS, so it'd be useful to also post it).
Related
i have a menu bar that has 3 anchor elements and i want to load the content of those elements while staying on the same page.
i want to do so without making linking to another html file that has those contents.
i have tried adding id's to the divs and linking to them with an anchor element but that doesnt make the other content disappear no matter what link i am on
<div class = "logo">
<img src="logo-removebg-preview.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Library</li>
<li>Gallery</li>
<li>عربي</li>
</ul>
</nav>
</header>
<main>
<section class = "inner-section">
<div class="sub-menu">
<ul>
<li>Who We Are</li>
<li>Our Values</li>
<li>History & Structure</li>
</ul>
</div>
<div class="wrapper">
<div id ="who-wrapper"class="who-body">
<h3>Who We Are?</h3>
here is the image
You can use anchor tag to call the specific section
Anchor content
<section id="id_of_section">
some content here
</section>
So I added smooth scrolling and a button that scrolls you to the bottom and that's the point but now every time I load in and reload the site etc. it automatically scrolls down. I also want to put the "About me" heading further down so it isn't visible unless you click "Click to learn more"
Picture of the site: https://i.gyazo.com/79313e6ee1fe3de82d18b33f238ac5d9.jpg
HTML CODE:
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
</body>
</html>
I don't understand what you want to say provide CSS for easy to understand your problem.
Set #down as default display: none and then add script(see my code) and also add onclick="show()" in button element,
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button" onclick="show()"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
<script>
function show() {
document.getElementById("down");
down.style.display = "block";
}
</script>
</body>
</html>
This
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
is invalid - you cannot nest interactive elements like that. Either use a button or use an anchor.
If your page is automatically scrolling, I'd assume you're reloading the page after clicking this anchor. I suspect that if you look at your browser's navigation bar, it will end with #down, like
https://whateveryourdomain.is/somepage.html#down
That's how page anchors work - the browser will attempt to scroll the page until the matching anchor tag or id'd element is at the top of the viewport.
I noticed that when I scroll upwards fast in Safari, the sticky nav jumps around, then I have to scroll slowly again to get it to click back into it's proper place. I'm using Foundation 6. Also, this is a new issue, as everything used to work just fine in Safari, but something must have changed in the past 4 months or so. See below for an example of the issue.
Here's the HTML for the nav bar. I haven't done anything special with the CSS.
<nav class="top-bar-container hide-for-small-only" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<ul class="menu menu-hover-lines" data-magellan>
<li><a class="menu-options" href="home">Home</a></li>
<li><a class="menu-options" href="projects">Projects</a></li>
<li><a class="menu-options" href="articles">Articles</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
The issue only arises in Safari. Chrome, etc. everything works fine. Has anyone else had this problem? Any help is appreciated.
Had the same problem. I added an id to the body tag and then anchored the top container to it.
<body id="the-body">
<div data-sticky-container>
<div data-sticky data-margin-top="0" data-top-anchor="the-body:top" data-stick-on="small">
<div class="top-bar topbar-sticky-shrink" id="top-menu">
<div class="top-bar-title">
NAME
</div>
<div class="top-bar-right">
<ul class="menu" data-magellan>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
</div>
</div>
</div>
</div>
I recently started to learn CSS and HTML and I am doing a front page for exercise. However, the browser is overriding and turning my other elements (in different div) into links. I tried CSS to solve it, nothing worked. I removed all CSS and it still is the same.
The container div and all the elements inside it is are now links and when I click, it tries to redirect to hrf.html page.
Can you please tell me where I am doing a mistake?
Elements in container div in the dev tool have this code:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conquer</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li><a href="hrf.html">Homepage</li>
<li><a href="hrf.html">About Us</li>
<li><a href="hrf.html">Services</li>
<li><a href="hrf.html">Contact</li>
<li><a href="hrf.html">External</li>
</ul>
</div>
</div>
<div class="container">
<div class="first-sec">
<div class="first-img">
<img src="image1.jpg" alt="image">
</div>
<div class="heading">
<h1>CONQUER</h1>
<h2>Simple Website Design</h2>
</div>
</div>
</div>
</body>
</html>
it is necessary to close the tags properly otherwise there scope will disturb effects of other tags too..here in your code you forget to close <a> anchor tags thats why its become worry for you..try this
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
</ul>
</div>
</div>
Best of luck ahead
This is because you haven't closed any <a> tag. You must close it or else you will face same issue.
<li>Homepage</li>
Follow this practice in all <li> elements.
That should fix your code. Let me know.
you haven't closed the anchor tags inside your "navlist" class.
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
try this..
I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g