White row appeared below main menu and above jumbotron on a drupal site. I am unable to remove it.
I think that it is css problem but I can't find what exactly causing it. Here is the link to codepen: https://codepen.io/lomachx/pen/WNbLgYa
<body class="html front not-logged-in no-sidebars page-node i18n-ru">
<div id="skip-link" class="skip-link">
Skip to main content
</div>
<div class="menu-wrap">
<div class="full-wrap logo-wrap"><!--c-->
<div id="logo">
<img src="img/logo.png"/>
</div>
<h1 id="site-title">
Cool Site
</h1>
<nav id="main-menu" role="navigation">
<a class="nav-toggle" href="#">Navigation</a>
<div class="menu-navigation-container">
<ul class="menu"><li class="first leaf">Main</li>
<li class="leaf">Articles</li>
<li class="last leaf">About</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="header"><!--c-->
<div class="homebanner">
</div>
<!--New navbar -->
<div>
<nav class="navbar-lower" role="navigation">
<div class="region region-second-menu">
<div id="block-system-navigation" class="block block-system block-menu">
<div class="content">
<ul class="menu">
<li class="first last leaf">Главная</li>
</ul>
</div>
</div> <!-- /.block -->
</div>
</nav>
</div>
</div>
<div class="bckgr-wrap">
<div><H1>Nest</H1></div>
</div>
</body>
</html>
Change body margin-top:50px to the height of your header like below
css
body {
color: #333;
background: #fff;
background-size: cover;
font-family: 'Philosopher', sans-serif;
font-size: 14px;
line-height: 180%;
margin-top: 35px;
}
Related
my html page has this unwanted white patch in the bottom and I don't know why. I don't want to be able to scroll down that long. It stays there regardless by default. it dissapears when I hover on the left(front) element but reappears when I hover on the right(behind) element.
here is the codepen : https://codepen.io/aronnora/pen/ExjJrag
<nav class="nav_bar">
<img src="580b57fcd9996e24bc43c4f8.png" alt="logo" class="logo" id="logo">
<div class="trans" id="trans"> trans energy solutions </div>
<ul class="ul">
<li class="li1">Home</li>
<li class="li2">About Us</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Facility</li>
<li class="li6">Testing</li>
<li class="li7">Clients</li>
<li class="li8">Contact</li>
</ul>
</nav>
<div class="white">
</div>
<div class="pro">
<div class="text">
PRODUCTS
</div>
</div>
<div class="total">
<div class="one">
<img src="liquid-immersed-distribution-transformers-768x784.png" alt="kakashi" class="Kakashi" height="300rem"></img>
<div class="downtextone">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不注更ルモト点究サトケ別意マワ抜博写ミ元
</div>
</div>
<div class="two">
<img src="transtech-2.png" alt="madara" class="Madara" height="300rem"></img>
<div class="downtexttwo">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不
</div>
</div>
</div>
your div takes a default height as it's content. so just add overflow:hidden; to class (.tow)
.two {
height: 58.29rem;
width: 45rem;
transition: opacity 1s;
background-color: black;
position: absolute;
z-index: 10;
overflow: hidden;
}
I have to include an HTML menu.
I need to edit the active page from the css menu.
include menu:
<div w3-include-html="inc/header.html"></div>
/*CSS example - but not working:*/
.main-menu a.active {
color: #0061bb;
}
<div class="mnmenu-sec">
<div class="container">
<div class="row">
<div class="col-md-12 nav-menu">
<div class="col-md-3">
<div class="logo">
<img src="img/logo.png" alt="" />
</div>
</div>
<div class="col-md-9">
<div class="menu">
<nav id="main-menu" class="main-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
I need to highlight an active page from the menu, such as changing the font color.
Can you tell me how I could do it?
.main-menu a {
color: #000;
transition: 0.3s;
}
.main-menu a:hover {
color: #0061bb;
}
<div class="mnmenu-sec">
<div class="container">
<div class="row">
<div class="col-md-12 nav-menu">
<div class="col-md-3">
<div class="logo">
<img src="img/logo.png" alt=""/>
</div>
</div>
<div class="col-md-9">
<div class="menu">
<nav id="main-menu" class="main-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
:active = when a link it is being clicked.
:hover = when the mouse cursor is over the link
If you want the :active then this css should do it:
#main-menu a:active {
color: #0061bb;
}
If you wanna color the link you currently are, than you need JavaScript to add a class like class="currentLink" then add css to it
.currentLink {
color: #0061bb;
}
i am trying to use the flex box technique in https://css-tricks.com/couple-takes-sticky-footer/ to responsively push down the footer in my page http://apple.mdsc1.com/test/
i used:-
<style>
#wrapper {flex: 1 0 auto;}
body, html {height: 100%}
body {
display: flex;
flex-direction: column;
}
</style>
but it failed. something in the ready made layout that i am using is spoiling the flex
how i make it work?
because the parent of #wrapper is not a flex element, so you need to change the rules from body to jPanelMenu-panel and add height:100% to it
body,
html {
height: 100%;
margin: 0
}
.jPanelMenu-panel {
display: flex;
flex-direction: column;
height: 100%
}
#wrapper {
flex: 1;
}
#footer-bottom {
background: lightgreen
}
<div class="jPanelMenu-panel">
<div id="wrapper">
<!-- Top Bar
================================================== -->
<div id="top-bar">
<div class="container">
<!-- Top Bar Menu -->
<div class="sixteen columns">
<ul class="top-bar-menu" style="float: right">
<li><i class="fa fa-phone"></i>00 971 2 6130700</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Header
================================================== -->
<div class="container">
<!-- Logo -->
<div class="four columns">
<div style="margin-top: 18px; margin-bottom:15px; float: left">
<h1>
<img src="images/mdsc1logo.png" alt="mdsc1">
</h1>
</div>
</div>
</div>
<!-- Navigation
================================================== -->
<div style="background-color: #292929">
<div class="container">
<div class="sixteen columns">
<i class="fa fa-bars"></i> Menu
<nav id="navigation">
<ul class="menu js-enabled arrows" id="responsive" style="margin: 0px">
<li>Home</li>
<li>About Us</li>
<li class="dropdown">
Solutions
<ul style="display: none;">
<li>Apple</li>
<li>Microsoft</li>
<!-- <li>Online Ordering</li>-->
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Slider
================================================== -->
<div class="container">
<div class="sixteen columns">
<p style="font-size: 50px; margin-top: 40px">The Home Page For MDS ONE As A Whole</p>
</div>
</div>
</div>
<div id="footer-bottom">
<!-- Container -->
<div class="container">
<div class="eight columns">© Copyright 2017 by MDSC1. All Rights Reserved.</div>
</div>
<!-- Container / End -->
</div>
</div>
Trying to add background image to bulma.io hero section, but it doesn't work!
Heres the code:
<div>
<section class="hero is-primary is-fullheight header-image">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
<!-- navbar start, navbar end -->
<div class="navbar-end">
<a class="navbar-item" href="/about">About</a>
<a class="navbar-item" href="/path">Path</a>
<a class="navbar-item" href="/blog">Blog</a>
</div>
</div>
</header>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
Title
</h1>
<h2 class="subtitle">
Subtitle
</h2>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth">
<div class="container">
<ul>
<li class="is-active"><a>Overview</a></li>
<li><a>Modifiers</a></li>
<li><a>Grid</a></li>
<li><a>Elements</a></li>
<li><a>Components</a></li>
<li><a>Layout</a></li>
</ul>
</div>
</nav>
</div>
</section>
</div>
And css code:
.header-image {
background-image: url("http://orig14.deviantart.net/7584/f/2015/181/2/7/flat_mountains_landscape_by_ggiuliafilippini-d8zdbco.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
Theres the question, why this won't work?
Everything should work as expected, there is also another one post on stackowerflow about this question, but the solution from that post also won't work!
Your code works as expected on my local environment.
The most probable reason your code is not working is because you forgot or didn't link Bulma correctly in the header.
I'm trying to vertically center the menu links of my header, but does not work. I'm using Bootstrap.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 header">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-2" style="font-size: 40px;">
<p>Capelli</p>
</div>
<div class="col-xs-3"></div>
<div class="col-xs-6">
<ul class="list-group list-inline">
<li>Vestidos</li>
<li>Meus Pedidos</li>
<li></li>
<li></li>
<li>Login</li>
<li>Cadastro</li>
<li></li>
<li></li>
<li>Carrinho</li>
</ul>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #CFCFCF;
}
.header {
min-height: 3.7em;
color: #FFFFFF;
background-color: #002A43;
font-family: Arial, sans-serif;
font-size: 20px;
}
.vertical {
float: none;
display: inline-block;
vertical-align: middle;
}
When a run the code, nothing happens.
I've tried many things, like use the class directly in row or in col-, but nothing work. I also trie diferent methods to align vertically, but did not work.
P.S.: Sorry for my bad english.
You want to create a nav bar menu?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Capelli</a>
</div>
<div>
<ul class="nav navbar-nav push-right">
<li class="active">Vestidos</li>
<li> etc</li>
<li>etc</li>
<li>etc</li>
</ul>
</div>
</div>
</nav>
in css you shoud define the font-size of X pixels, because you are using relative font-size.
its 3.7em of 10px or 20px. depending the browser the value can change.
html{ font-size: 16px;}
.header{font-size: 1.25em; // 20/16 = 1.25 and you have sure the font size is relative to 16 because you have define html font size to 16px;.