this is the code for my nav
.nav {
z-index: 1;
width: 100%;
background-color: red;
display: block;
position: absolute;
top: 100%;
}
.nav ul {
display: none;
}
and this is the code for my menu
/* checkbox (for menu) */
.menu-icon-wrap {
/* background color of checkbox */
top: 5.5px;
left: 960px;
/* position of entire menu /w checkbox */
position: absolute;
/* ^ this allows checkbox to be positioned */
cursor: pointer;
z-index: 1;
}
/* (menu) */
.menu-icon {
padding: 15px 20px;
display: block;
float: right;
/* ^ makes the menu go beside(next to) the checkbox */
cursor: pointer;
overflow: hidden;
position: relative;
z-index: 1;
}
.menu-icon .navicon {
position: absolute;
top: 14px;
left: 10px;
width: 20px;
height: 2.5px;
background: black;
border-radius: 4px;
transition: 0.5s;
display: block;
z-index: 1;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
content: '';
transform: translateY(-6px);
width: 15px;
height: 2.5px;
background: black;
display: block;
position: relative;
}
.menu-icon .navicon:after {
content: '';
transform: translateY(+4.5px);
height: 2.2px;
width: 10px;
display: block;
position: relative;
background: black;
}
.menu-btn:checked ~ .menu-icon .navicon
{
background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:after {
width: 21px;
transform: translateY(0px) rotate(315deg);
transition-delay: 0.125s;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
width: 25px;
transform: translateY(0px) rotate(45deg);
transition-delay: 0.125s;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~ .sub-nav {
display: block;
position: absolute;
top: 100;
left: 920px;
z-index: 2;
width: 100px;
height: 100px;
}
ul {
padding-left: 10px;
padding-top: 35px;
}
li {
display: block;
padding-left: 25px;
padding-top: 2px;
}
--color-link-toc: #878787;
.sub-nav {
display: none;
}
.sub-nav-item {
pointer-events: none;
opacity: 0;
display: block;
margin: 0.35rem 0;
opacity: 0;
}
.sub-nav-title {
pointer-events: none;
color: var(--color-link-toc);
}
and this is the html
<div.navbar class="navbar">
<!-- ^ header -->
<h2 class="nav__chapter"> Home</h2>
<div class="menu-icon-wrap">
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon">
<span class="navicon"></span>
</label>
</div>
<nav class="nav">
<!-- ^ nav -->
<ul class="sub-nav">
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li>Moodboard</li>
<li>Contact</li>
</ul>
</nav>
</div.navbar>
please help me. I've been banging my head against the table trying to figure this out. I've spent days on this and can't get it working. I should be able to click the menu (checkbox) and when checked it should open the sub-nav or (nav). what am I doing wrong?
I am hopeless and so I hope you could help us with this. I recently just bought a new theme for our site but I just want to place the menu right under the Logo As shown.
this is the screenshot and fake adjustment of what we hope we could change to
As we pressed F12 to inspect the section, we are only able to find the below code in base.css but dont know how to adjust them.
/* Header menu drawer */
.header__icon--menu .icon {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}
details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8);
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
visibility: hidden;
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}
.header__inline-menu details[open] > .header__submenu {
opacity: 1;
transform: translateY(2.7rem);
animation: animateMenuOpen var(--duration-default) ease;
}
/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
}
.header__inline-menu .header__menu-item {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
text-transform: var(--font-header-menu-text-transform);
font-size: 1rem;
letter-spacing: 0.125em;
}
.header--top-center .header__heading-link {
margin-left: 0;
}
#media screen and (min-width: 990px) {
.header__inline-menu {
display: inline-block;
}
.header--middle-left .header__inline-menu {
margin-left: 0;
}
}
.header__menu {
padding: 0 1rem;
}
.header__menu-item {
overflow: hidden;
padding: 1.5rem;
text-decoration: none;
color: rgba(var(--color-foreground), 0.75);
}
.header__inline-menu .header__menu-item {
align-items: flex-start;
}
.header__menu-item > span {
position: relative;
display: flex;
flex-direction: column;
backface-visibility: hidden;
transition: var(--duration-default);
overflow: hidden;
}
.header__menu-item span:not(.header__active-menu-item) > span {
display: flex;
flex-direction: column;
backface-visibility: hidden;
transition: var(--duration-default);
}
.header__menu-item span:not(.header__active-menu-item) > span:after {
position: absolute;
transform: translateY(100%);
display: block;
content: attr(title);
color: rgba(var(--color-foreground));
}
.header__menu-item:hover span:not(.header__active-menu-item) > span {
transform: translateY(-100%);
}
.header__menu-item:hover span:not(.header__active-menu-item):after {
}
.header__menu-item .header__active-menu-item {
color: rgba(var(--color-foreground));
}
.header__icon .header__icon-name {
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
height: 1.5rem;
text-decoration: none;
font-size: 1rem;
}
.header__icon .header__icon-name span {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
backface-visibility: hidden;
transition: var(--duration-default);
}
.header__icon-name span:after {
display: inline-block;
content: attr(title);
margin-top: 0.8rem;
color: rgb(var(--color-foreground));
}
.header__icon:hover .header__icon-name span {
transform: translateY(calc(-50% - 0.8rem / 2));
}
.header__submenu {
transition: opacity var(--duration-default) ease;
transform: var(--duration-default) ease;
z-index: 15;
}
.header__submenu.list-menu {
padding: 0.9rem 2.2rem 0.9rem 2.2rem;
}
.header__submenu .header__menu-item:after {
right: 2rem;
}
.header__submenu .header__menu-item {
padding: 1.3rem 0;
height: auto;
}
.header__submenu .header__menu-item:hover {
color: rgba(var(--color-foreground), 1);
}
.header__submenu li:not(:last-child) {
border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
}
.header__submenu .header__submenu .header__menu-item {
padding-left: 3rem;
}
.header__menu-item .icon-caret {
right: 0.8rem;
z-index: 0;
}
.header__submenu .icon-caret {
right: 0.5rem;
transform: rotate(-90deg);
}
details-disclosure > details {
position: relative;
}
#media screen and (min-width: 990px) {
.header__submenu .header__submenu .header__menu-item {
padding-left: 0;
}
}
I'm trying to pin the header and menu to the top of the page. In pc mode and tablet mode it works, but when I enter mobile mode it stops working.
When I scroll down the menu is not fixed. This only happens in mobile mode.
I've tried to edit the css code in several different ways, but I'm not able to.
HTML code:
<header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">
<nav class="navbar">
<div id="logo"><img src="logo.svg"> </div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#sobre_md" >Sobre</a></li>
<li>Oferta</li>
<li>Implementação</li>
<li>Segurança</li>
<li>FAQ</li>
<li>Imprensa</li>
</ul>
</div>
</nav>
</header>
<script>
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
const links = navbarLinks.querySelectorAll("a")
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
for(let link of links){
link.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
}
</script>
.grid-child.container-component {
grid-column: full-start/full-end !important;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
position: relative;
}
.navbar {
margin: 0;
padding: 0;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
color: white;
background-color: #5aaddd;
}
#logo{
height: 60px;
width: 60px;
}
#logo img{
margin-left: 30%;
height: 100%;
display: flex;
padding: 0.5rem;
padding-top: 10px;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
#button {
display: inline-block;
background-color: #DEDB45;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
I've installed the express-minify middleware but for some reason it seems to cause an error whilst loading the attached css file.
I have tried validating the CSS with an online service and it doesn't give me any error.
I have tried to debug by removing all elements leaving one at the time and when I hit .mainmenu tr td:hover:not(.mainmenu_item_selected) it fails.
So removing everything from .mainmenu tr td:hover:not(.mainmenu_item_selected) to the end of the file will make it work (Obviously without all the other required styles).
I have even tried to recreate the file and also name it differently without any success.
The express logs are showing me: GET /stylesheets/gctl.css 200 4.954 ms - - meaning that the file should be served correctly.
Its a standard installation as per npm website:
var minify = require('express-minify');
app.use(minify());
File (saved as gctl.css)
In main page (Using PUG): link(rel='stylesheet' href='/stylesheets/gctl.css')
CSS file:
html, body, * {
font-family: 'Raleway', sans-serif;
margin: 0;
}
.centered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loginform {
text-align:center;
vertical-align:middle;
width: 30%;
height: 50%;
}
.closenewitem {
cursor: pointer;
}
/* Tooltip overide settings */
div.tooltip-inner {
max-width: 500px;
}
/* Remove outlines such as in chrome */
input:focus {
outline: 0;
}
/* all input text align center*/
input, textarea, label {
text-align: center;
cursor: pointer;
font-weight: 400;
}
/* Labels for help add help class to them */
label.help:hover {
color: red;
}
/* Logo CSS */
.logo {
position: absolute;
cursor: pointer;
top: 4px;
height: 40px;
}
/* menu css */
.mainmenu {
border-right-width: 1px;
border-right-style: solid;
border-right-color: lightgray;
margin-left: -15px;
height: 100%;
width: 100%;
}
.mainmenu tr td {
padding: 10px;
}
.mainmenu tr td:hover:not(.mainmenu_item_selected) {
border-right-color: red;
border-right-style: solid;
border-right-width: 3px;
color: black;
cursor: pointer;
background-color: #f0f0f0; /*#f9eafc*/
}
/* Selected menu item */
.mainmenu_item_selected {
border-right-color: black;
border-right-style: solid;
border-right-width: 3px;
background-color: lightgray; /*#f7faff*/
font-weight: 700;
color: black;
}
.mainmenu tr td span {
padding-left: 2px;
}
/* Footer div for additions to DB*/
.footer {
overflow: scroll;
position: absolute;
bottom: 0px;
height: auto;
min-height: 50%;
padding-bottom: 20px;
background-color: #f6f6f6;
border-top-color: lightgray;
border-top-style: solid;
border-top-width: 1px;
width: 100%;
}
.fixed-button {
position: absolute;
top: 4px;
right: 4px;
}
/* Error handling CSS */
.customerror {
border-color: red;
border-width: 2px;
background-color: #ffcccf;
font-weight: bold;
}
/* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
.dsk-panel:hover {
-webkit-box-shadow: -1px 5px 15px 0px lightgray;
-moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
box-shadow: -1px 5px 15px 0px lightgray;
}
.desktop-icon {
width: 60px;
opacity: 0.6;
}
I'm stuck and have no clue on what is causing the problem!
If you're sure that the default behavior breaks the Bootstrap layout and there is no issue posted about it yet then you should post an issue on GitHub where this project tracks things like that.
But "breaks layout" doesn't say anything really. Does it change margins? Does it remove borders? What exactly does it break and how? So you should prepare a minimal set of CSS that this module breaks in a predictable manner instead of saying vague claims like that if you want your issue to be taken seriously.
It's entirely possible that you found a bug in this module but it's really hard to tell after an overly general claims like this.
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/