How do I get my sidemenu to remain stuck so the navigation tabs always remain on top and don't scroll with the page
How do I get the buttons to change background color on hover?
The issue is that only the text changes background color or only a small portion
THE CODEPEN
<head>
<title>Århus Gastronomi</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="frontpage" class="content">
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<p>Another item</p>
</div>
<div id="page2" class="content">
<p>This is page 2</p>
</div>
</body>
Add position: fixed; to your #sidebar
You may also want to add this:
.content {margin-left: 10%;}
And restructure your html like so, with the nav outside of the first content section::
<body>
<div id="sidebar">
<ul id="navbar">
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
<li class="navitem">Kat</li>
</ul>
</div>
<div id="frontpage" class="content">.......
This will make it so that your content isn't behind the nav you have.
Related
I'm using the admin template CoreUI. My layout is the basic one as described in the page https://coreui.io/v1/docs/layout/options/
I'm trying to have the aside menu on the right to open floating over the main content and not inline decreasing the width of main.
I've tried to remove aside-menu-fixed, add aside-menu-floating or absolute, but it doesn't work.
Is there a way to do it without modifying the CoreUI css?
Below the code snippet, but it doesn't work here on SO
.app-header{background-color:#4B8BF4}
.sidebar{background-color:#FFCD42}
.app-footer{background-color:#DD4F43}
.aside-menu{background-color:#19A15F}
.main{background-color:#EEE}
<link href="https://cdn.jsdelivr.net/npm/#coreui/coreui#2.1.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/#coreui/coreui#2.1.7/dist/css/coreui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#coreui/coreui#2.1.7/dist/js/coreui.min.js"></script>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<header class="app-header navbar">
<!-- Header content here -->
<h2>I'm the header!</h2>
</header>
<div class="app-body">
<div class="sidebar">
<!-- Sidebar content here -->
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="nav-icon icon-speedometer"></i> Dashboard
</a>
</li>
<li class="nav-title">Settings</li>
</ul>
</nav>
</div>
<main class="main">
<h1>I'm the main content...</h1>
</main>
<aside class="aside-menu">
<!-- Aside menu content here -->
</aside>
</div>
<footer class="app-footer">
<!-- Footer content here -->
</footer>
</body>
body element:
add class aside-menu-off-canvas
and remove class aside-menu-fixed
hth
I have a ul element as part of a navigation bar at the top of my webpage, and I'd like to move it downwards slightly. Here is an image of the navigation bar currently:
image
I'd like to move it downward slightly so the text can match up with the white bar running across the top of the page.
Here is a snippet of the HTML:
<!-- Nav -->
<nav id="nav">
<ul>
<li>HOME</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>GET IN TOUCH</li>
</ul>
</nav>
How can I do this using CSS?
EDIT:
Here is all the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>HOME</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>GET IN TOUCH</li>
</ul>
</nav>
</div>
<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>
</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
Meet the team
</div>
</footer>
</article>
</div>
<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2>So what is Serenity?</h2>
<p>
</p>
</header>
<footer>
<div>
Privacy
</div>
</footer>
</article>
</div>
<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><span class="label">Email</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>
margin-top is most likely what you're looking for.
Here is your code with margin-top added to an internal <style>. Keep in mind that the original CSS file is missing, so I can't show you the difference based on the image. The <ul> has been highlighted to show that the margin has been applied above it.
Note that if you want to only have the margin-top applied to the main nav <ul>, you should uniquely specify it (e.g. with a class) so that it does not affect all <ul>s in the document.
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
ul {
margin-top: 50px;
background: cyan;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>HOME</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>GET IN TOUCH</li>
</ul>
</nav>
</div>
<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>
</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
Meet the team
</div>
</footer>
</article>
</div>
<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2>So what is Serenity?</h2>
<p>
</p>
</header>
<footer>
<div>
Privacy
</div>
</footer>
</article>
</div>
<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><span class="label">Email</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>
I use bootstrap in my website, i create a new dropdown button and I added in the header, my problem is when I click on dropdown that menu is appear under the others elements, I will add here an image to see what is the problem , I think the problem is z-index:
here is my html code:
<div class="page">
<div class="header-container">
<div class="container">
<div class="row">
<div class="header">
<div class="col-md-4 col-md-offset-0">
<div class="dropdown">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.
.wrapper {
overflow: hidden; // Remove
width: 100%;
}
Try it This Code in your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I am a complete noob when it comes to using bootstrap, or any HTML. I made a simple banner using photoshop and a simple nav-bar for my high school robotics team, but I am having trouble comprehending bootstrap's grid system. For some reason, my navbar is cutting off my banner. I want the banner below the navbar, how would I do this using bootstrap?
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</body>
Bootstrap doesn't really have a banner element, and the grid system isn't necessarily related to placing an item like that into your page. If you want a banner that spans the page like the navbar does, then you probably want to look at their Jumbotron element. All you really have to do is replace your "banner" class with a "jumbotron" like so:
<!-- Banner -->
<div class="jumbotron">
<img src="Banner.png" class="img-responsive" alt="Reponsive image" />
</div>
Then you just need to add a little custom styling to hide the gray background and have your banner image take up the width of the screen:
.jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
That should do it. I had to edit my answer once I saw that you had posted the link to your website.
Demo Here
include your banner inside the container tag
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>
Just add the following line to your CSS:
body
{
padding-top:50px;
}
And you should be good to go.
This is generally done in Bootstrap when navbar-fixed-top is used.
I am using the framework of a previous website I built as part of an assignment to build an actual website. However, when I copy all the code over, my navs do not look the same as they did when I did my assignment.
Here is the code, and you can view a live example of it at 192.241.215.180
The navigations are supposed to be "pills" and they are supposed to go across, not stack up.
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<title>C$50 Finance: Portfolio</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
</head>
<body>
<div class="container">
<div id="top">
<img alt="C$50 Finance" src="/img/logo.gif"/>
</div>
<div class="navbar nav-pills" role="navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Quote</li>
<li>History</li>
<li>Change Password<li>
</ul>
</div>
</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright © John Harvard
</div>
</div>
</body>
you have a couple issues. First, your markup is incorrect, if you want pills, you need to use nav-pills class for the <ul> element, like this:
<ul class="nav nav-pills">
While this should be enough, this alone won't do anything, because you have a bad CSS file and a bad JQuery file. I don't know how you managed to do that, but that's what you got. So, instead of using your files, try using the CDN versions, like this:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
test them and see how they work out for you, but I'm sure this will fix your issues
Try this:
Use <ul class="nav nav-pills">
FULL HTML:
<div class="container">
<div id="top">
<a href="/">
<img alt="C$50 Finance" src="/img/logo.gif" /></a>
</div>
<div class="navbar nav-pills" role="navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Quote</li>
<li>History</li>
<li>Change Password</li>
</ul>
</div>
</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright © John Harvard
</div>
</div>
DEMO
Something is wrong with your version of Bootstrap. Using this worked for me:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
there are some problem in your bootstrap.min.css
you can use this links
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
after these changes this will fix your issues