I have a fixed menu that is attached to the left side of the screen. I need the links to be white, but once they overlap the footer the letters that are on top of he footer need to change to #333 ecause the footer background is white and hence the links not visible any longer. How can this be achieved? I have the folloing html:
<div class="container">
<nav>
<ul id="fixed">
<li><a href="Menu item</li>
<li><a href="Menu item</li>
<li><a href="Menu item</li>
</ul>
</nav>
</div>
<footer id="mainfooter"></footer>
and my css is
.fixed{
position:absolute;
left: 10px;
bottom: 10px;
}
I tried mixx-blend-mode but this does not achieve what I need.
Related
I'm struggling to fix a navigation bar to the center of a page using CSS and/or Bootstrap. I'd like it to be centered horizontally and vertically. I'm also trying to make sure that any content published below the nav bar doesn't affect its position.
Could someone please advise on how I achieve this?
Here's my HTML so far:
<body>
<div id="all-rows">
<div id="row">
<div class="container-fluid" id="navbar">
<div class="container text-center">
<h1>Welcome!</h1>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" onclick="loadAbout()">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">social</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">scripts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">contact</a>
</li>
</ul>
</h1>
</div>
</div>
</div>
<div id="row">
<p class="container-fluid" id="placeholder-bottom"> </p>
</div>
</div>
</body>
Here's my CSS:
#placeholder-bottom {
position: relative;
width: 60%;
padding: 2%;
margin: auto;
font-family: "Times New Roman", Times, serif;
}
#navbar {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
At the moment, the content is centered horizontally but not vertically. The closest I've come is to be able to put it centrally using "position: absolute" however the content below the navbar overlaps the navbar when in mobile view.
I'd be incredibly grateful for any help! (Newbie here!)
Thanks!
I have a navbar with logo on left and a navbar-right (float: right) on the far right which contains a dropdown as the first element and some other elements. The dropdown menu is large and responsive.
What I'd like to be able to do is prevent the dropdown from disappearing when I hover over the dropdown and move the cursor left in navbar (towards the logo). The dropdown should remain open as long as the cursor is still in the navbar. So this should not happen -
JS Fiddle - http://jsfiddle.net/gva90uks/10/embedded/result/
Code - http://jsfiddle.net/gva90uks/10/
I've tried adding left-padding to the dropdown-menu when the menu is open, but the padding has to be dynamic based on window size otherwise it pushes the logo. So I'm looking for better solutions rather than adding the padding.
I'm okay with both js and css based solutions.
I would use flexbox and flex-grow, like below.
This because flexbox allows elements to grow bigger (or shrink smaller) if there is space. So the drop-down link (the parent <li>-element) will at default styling be the width of the text on the link But when we hover over the link, the <li>-element will grow as much as possible, i.e. all the way to the brand, causing the drop-down not to hide when hovering over the top bar (which now contains the much bigger <li> (dropdown) element).
.navbar .container-fluid {
display: flex;
}
.navbar .container-fluid .navbar-collapse {
flex-grow:2;
}
.mega-menu {
position: absolute;
right: 0;
left: 0;
/*padding: 27px 0;*/
}
.navbar-right {
display: flex;
justify-content: flex-end;
width: 100%;
}
#menu-area {
display: flex;
}
#menu-area .dropdown-toggle {
margin-left: auto;
}
.dropdown-toggle:hover + .dropdown-menu, .dropdown-menu:hover {
display: block;
margin-top: 0;
}
.menu-large:hover {
flex-grow: 2;
}
.dropdown-toggle:hover {
flex-grow: 2;
}
.dropdown-toggle {
text-align: right;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse" id="">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown menu-large">
Dropdown <span class="caret"></span>
<div class="dropdown-menu mega-menu">
<div class ="container">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
I want to create button like menu using navbar. I want to do this because it's collapsible interface for small devices.
I write this HTML markup:
<div class="container">
<nav class="navbar" style="background-color: transparent;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" style="background-color: black;">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
</div>
</nav>
</div>
and this styles:
nav ul {
width: 100%;
text-align:center;
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
margin: 10px;
}
but there is some problem:
this menu items isn't center in ul. How I can center all li in ul?
If I resize the window in some width this menu broke in 2 line. How I can fix this that my menu being 1 line for md an lg sizes?
Demo
Thanks
Using white-space: no-wrap will stop items wrapping within the ul
Bootstrap puts float: left on nav.li elements which we need to override
Change your css to this:
nav ul {
width: 100%;
text-align: center;
white-space:nowrap /* <-- changed */
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
/*padding: 10px;*/
margin: 10px;
display: inline-block !important; /* <-- changed */
float: none !important; /* <-- changed */
}
Have to use !important to override bootstrap
Updated bootply
With Changes in your HTML and removing width of li, I got this working as you wanted.
<ul class="row nav navbar-nav">
<li class="active col-xs-3 col-sm-2 col-ms-2 col-lg-2">Home</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 1</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 2</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 3</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 4</li>
</ul>
Here is a working Bootply
Dont worry about setting the width to the li manually, use the bootstrap inbuilt classes. Also the above HTML could be rewritten like below.
<li class="col-xs-3 col-sm-2">Page 1</li>
You dont have to specify col-ms-2 col-lg-2 because by default bootstrap framwework will carry forward styles to all the devices untill a specific rule for that device is given. Here the rule col-sm-2 will be carried out to md device and lg device. But its always good practice to be as detailed as possible.
Slashpage height:100%
I'm attempting to make a splash page that will fill the screen but taking into account the size of the header and footer. The footer and header are not fixed position but footer will become sticky when the footer reaches top:0; all sounds good until I actually attempt to get the splash screen to function on multiple devices, I've attempted CSS media queries but believe I actually need a javascript to monitor changes to the height of the browser when the page is first visited. NOTE: I've taken a look at How to make the web page height to fit screen height but doesn't seem to mention the possiblity of scrolling.
HTML:
<nav class="top-menu">
<ul>
<li>Top Button 1</li>
<li>Top Button 2</li>
<li>Top Button 3</li>
<ul>
</div>
<div class="splashpage">
</div>
<nav class="bottom-menu">
<ul>
<li>Bottom Button 1</li>
<li>Bottom Button 2</li>
<li>Bottom Button 3</li>
<ul>
</div>
<div class="the-rest-of-the-page">
</div>
CSS
.top-menu{width:100%;height:40px;}
.bottom-menu{width:100%;height:40px;}
.splashpage{height:100%;height:100%;}
.the-rest-of-the-page{width:100%;}
So the splash page should fix the screen apart from the top and bottom bar, then user can then scroll down and see the rest of the page. Below is an image to demonstrate what I mean.
Basically, I am setting the splash page to 100% height then absolutely positioning the top menu at the top of the page and the bottom menu at the bottom. I'm accounting for the heights of the menus with padding on the top and bottom of the splash page div.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
.top-menu,
.bottom-menu {
width:100%;
height:40px;
position: absolute;
}
.top-menu {
background: blue;
top: 0;
}
.bottom-menu{
background: green;
bottom: 0;
}
.splashpage{
height:100%;
padding: 40px 0;
}
.the-rest-of-the-page{
width:100%;
min-height: 500px;
background: yellow;
}
<nav class="top-menu">
<ul>
<li>Top Button 1</li>
<li>Top Button 2</li>
<li>Top Button 3</li>
<ul>
</nav>
<div class="splashpage">
splash page content
</div>
<nav class="bottom-menu">
<ul>
<li>Bottom Button 1</li>
<li>Bottom Button 2</li>
<li>Bottom Button 3</li>
<ul>
</nav>
<div class="the-rest-of-the-page">
rest of the page content
</div>
I have two "boxes" in a sidebar with responsive widths. I need the headers to be sticky and the content scrollable. If I try to use position:fixed on the headers, I run into the issue where they lose their responsive width/background color.
Here's a jsfiddle of one of the boxes: http://jsfiddle.net/4tadzk7x/
HTML:
<aside class="sidebar col-xs-3 pull-right">
<div class="box-with-header queries">
<div class="header-fixed">
<h5 class="headline">Headline</h5>
</div>
<div class="content">
<ul class="item no-bullets red">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
<ul class="item no-bullets blue">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
<ul class="item no-bullets yellow">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
</div>
</div>
</aside>
Add this two classes:
.header-fixed{
position:fixed;
width:100%;
}
.content{
padding-top:45px;
}
Check JSFiddle Demo
Update:
If width isn't always 100% so you can simply move header div ans and modify your HTML code like this:
<aside class="sidebar col-xs-3 pull-right">
<div class="header-fixed">
<h5 class="headline">Headline</h5>
</div>
<div class="box-with-header queries">
<div class="content">
//content ...
</div>
</div>
</aside>
Check JSFiddle Demo
Use width: 100% and top: 0 on .header-fixed
Then this:
.box-with-header.queries {
max-height: 250px;
height: 250px;
margin-top: 3em;
}
FIDDLE
I am not sure if I understand your problem correctly. But if you want headers to be fixed and responsive. Give it position fixed and width 100%. That should do it.
Updated fiddle : http://jsfiddle.net/4tadzk7x/1/
.headline {
background: red;
padding: 10px;
margin: 0 0 8px 0;
text-transform: uppercase;
font-size: 13px;
position:fixed;
top:0;
width:100%;
}
You also need to add margin-top to content so that it doesn't overlap with the header.
div.content{
margin-top:40px;
}