I need to appear the header background color only when the mouse pointer touching the header, or clicking any part of the body.
Otherwise I need a hidden header background color.
<body>
<div id="wrapper">
<div id="header">
<a style="text-decoration:none" href="#" target="_blank">about.me</a>
<button class="button">Log In </button>
<button class="button">Create your page!</button>
</div><!-- #header -->
<div id="content">
<div id="image">
<center><img src="../../../../../wamp/www/check_php/IMG_9079.JPG"></center>
<div class="clear_both" /> </div>
<div class="sub">
<p align="center"><button class="button2">View my photos</button></p>
<div class="clear_both" /> </div>
<p align="left">This is the power of a common man</p>
</div>
</div><!-- #content -->
<div id="footer">
<p>Introduce yourself with a free, one-page website.
<button class="button1">Get Started </button></p>
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
add a class to your in html:
<div id="header" class="header_navi">
<a style="text-decoration:none" href="#" target="_blank">about.me</a>
<button class="button">Log In </button>
<button class="button">Create your page!</button>
</div><!-- #header -->
add this to your css:
.header_navi {
background-color:transparent;
}
.header_navi:hover {
background-color:red;
}
Related
I am working on a top banner with Bootstrap and my condensed menu always is wrapping to a new line for 1024x768. This is working well for resolution greater than 1024x768. Please advise in correcting my html so that the banner stays fixed on the top for 1024x768 resolution.
The banner text has to be centered, the logo should be on the left and logged in user name should be on the right.
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
<div class="navbar-header navbar-brand">
Application Title on Banner Goes Here
</div>
<div class="navbar-nav nav navbar-right">
<button class="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name">
Welcome loggedInUser
</span>
</button>
</div>
</div>
Does this look good to you?
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="container">
<div class="row w-100 justify-content-md-around row-cols-3">
<div class="col-lg-auto">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div>Application Title on Banner Goes Here</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div class="navbar-nav nav navbar-right">
<buttonclass="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name"> Welcome loggedInUser </span>
</button>
</div>
</div>
</div>
</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 need to place my footer inside of the Joomla automatically added class articleBody and .item-page that wraps my article content. The footer is currently loaded after the article message in my index.php with the pages themselves being generated in the back-end of Joomla, hence the automatic wrapper. Therefore the footer is not wrapped in the .item-page with the rest of the article.
The reason for this is because the footer goes over all the other DIVs on the page except the first DIV. All of the DIVs are set at 100% height including the articleBody and .item-page which are generated by Joomla. It has to be this way to get the effect. For the record I am using Bootstrap 3 and loading it correctly.
After spending hours in the DOM I realized if I could drop my tag into the .item-page wrapper with the body of the article, it would fit at the bottom as it should. Preferably, I won't have to code the footer into each and every page as that would be disastrous from an editing standpoint.
If anyone is curious, I am very eager to solve this so I'd be happy to chat about this and post the results here to help others who may have this issue in the future.
No, position absolute trying to force it to the bottom does not work.
HTML - INDEX.PHP
<div class="container-fluid">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<jdoc:include type="modules" name="nav" style="html5" />
</div>
</nav>
<jdoc:include type="message" />
<jdoc:include type="component" />
<!--END CONTAINER-->
</div>
<footer>
<div class="container">
<div class="row footer-container footer-row">
<div class="col-sm-3">
<div class="footer-logo">Logo</div>
</div>
<div class="col-sm-9">
<p class="footer-about">
About
</p>
<p class="footer-text">
Footer content here
</p>
</div>
<div class="col-sm-3">
<p class="footer-about">
Contact Info
</p>
</div>
</div>
</div>
</footer>
HTML - IN CODE EDITOR OF THE AFFECTED PAGE
<div class="container-fluid">
<div id="landing-bkg">
<div class="row">
<div class ="col-sm-7 col-xs-12">
<h1>Headline</h1>
<h3>Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END LANDING BKG-->
<div id="another2">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Headline</h2>
<h3 class="center">Subhead</h3>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER2-->
<div id="another3-bkg">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class ="col-md-7 col-sm-12 col-xs-12">
<h2>Headline</h2>
<h3> Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END NESTED COLUMN -->
</div>
<!-- END NESTED ROW -->
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER3 BKG-->
<div id="another4">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Subhead</h2>
<form>
<input type="email" placeholder="Input Field" class="center-block">
</form>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- ANOTHER 4 -->
</div>
<!-- END CONTAINER -->
CSS
/****HTML & BODY ****/
html,
body{
width:100%;
height:100%; //Makes my DIVs 100% height, works great
margin:0;
padding:0;
}
/****CONTAINER ****/
.container-fluid{
height:100%;
}
/**** JOOMLA CLASSES I OVER RIDE TO GET THE DIVS AT 100% DOESN'T WORK WITHOUT IT ****/
.item-page{
height:100%;
}
div[itemprop="articleBody"]{
height:100% !important;
}
/**** FOOTER ****/
.footer-container{
background-color:#565A5C;
width:100%;
padding-top:50px;
padding-bottom:25px;
}
footer{
position:relative;
}
.footer-row{
width:100% !important;
margin:0 !important;
}
Fixed with one line of jQuery. This is the only way it would work as it needs to be inside of the itemprop="articleBody" in order to fit within the 100% height containers.
jQuery
jQuery('footer').appendTo('div [itemprop="articleBody"]');
I have to use a Joomla framework and create 100% height DIVs. I have done this successfully. However when trying to add the footer, it flies up toward the top of the screen and covers everything.
Upon further inspection through the DOM I found something interesting: The automatically added by the framework classes .item-page and div itemprop="articleBody" have all the sections under their section in the DOM tree like they should HOWEVER they only encompass the first DIV in terms of height. So it looks like my footer is trying to fit within the first DIV.
For the record, I'm successfully loading Bootstrap 3.
Help is greatly appreciated.
HTML - INDEX.PHP
<div class="container-fluid">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<jdoc:include type="modules" name="nav" style="html5" />
</div>
</nav>
<jdoc:include type="message" />
<jdoc:include type="component" />
<!--END CONTAINER-->
</div>
<footer>
<div class="container">
<div class="row footer-container footer-row">
<div class="col-sm-3">
<div class="footer-logo">Logo</div>
</div>
<div class="col-sm-9">
<p class="footer-about">
About
</p>
<p class="footer-text">
Footer content here
</p>
</div>
<div class="col-sm-3">
<p class="footer-about">
Contact Info
</p>
</div>
</div>
</div>
</footer>
HTML - IN CODE EDITOR OF THE AFFECTED PAGE
<div class="container-fluid">
<div id="landing-bkg">
<div class="row">
<div class ="col-sm-7 col-xs-12">
<h1>Headline</h1>
<h3>Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END LANDING BKG-->
<div id="another2">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Headline</h2>
<h3 class="center">Subhead</h3>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER2-->
<div id="another3-bkg">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class ="col-md-7 col-sm-12 col-xs-12">
<h2>Headline</h2>
<h3> Subhead</h3>
<div class="btn">
<p>Button</p>
</div>
</div>
<!-- END NESTED COLUMN -->
</div>
<!-- END NESTED ROW -->
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- END ANOTHER3 BKG-->
<div id="another4">
<div class="row">
<div class="col-sm-12">
<h2 class="center">Subhead</h2>
<form>
<input type="email" placeholder="Input Field" class="center-block">
</form>
<div class="btn btn-center">
<p class="center">Button</p>
</div>
</div>
<!-- END COL -->
</div>
<!-- END ROW -->
</div>
<!-- ANOTHER 4 -->
</div>
<!-- END CONTAINER -->
CSS
/****HTML & BODY ****/
html,
body{
width:100%;
height:100%; //Makes my DIVs 100% height, works great
margin:0;
padding:0;
}
/****CONTAINER ****/
.container-fluid{
100%
}
/**** JOOMLA CLASSES I OVER RIDE TO GET THE DIVS AT 100% DOESN'T WORK WITHOUT IT ****/
.item-page{
height:100%;
}
div[itemprop="articleBody"]{
height:100% !important;
}
/**** FOOTER ****/
.footer-container{
background-color:#565A5C;
width:100%;
padding-top:50px;
padding-bottom:25px;
}
footer{
position:relative;
}
.footer-row{
width:100% !important;
margin:0 !important;
}
Not 100% sure of what you want but :
footer{
position:absolute;
bottom: 0;
}
should place the footer correctly. Then add paddings to other elements to avoid them covering the footer.
My main goal is to create a btn that play/pause the song on my wedding site.
I got it to work on the desktop view port, but not on the phone.
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this
So far so good, everything work perfectly fine.
Here come the issue, here what it look like on the 400px
I see it, but, they're not clickable at all.
I tried to inspect it, this is what I see.
I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work.
I'm a little stuck now, please feel free to give me any suggestions.
HTML
<!--Header start -->
<header>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper" id="navbar">
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music">
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
</div>
{{-- Music --}} -------------------------------------------------
<div class="container">
<!--Logo -->
<div class="logo">
<img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="logo_phone hidden">
<img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navigation">
<li class="menuItem" id="home">Home</li>
<li class="menuItem">Count Down</li>
<li class="menuItem">Couple</li>
<li class="menuItem">Events</li>
<li class="menuItem">Gallery</li>
<li class="menuItem">Accommodation</li>
<li class="menuItem">RSVP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
<!--video header start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
<!--background slide show start-->
<div class="slide into_firefly">
<!--header text1 start-->
<div class="container hedaer-inner ">
<div class=" bannerText clearfix ">
<h1>Long & Roth</h1>
<h4>WE ARE GETTING MARRIED</h4>
<p class="ruler"><span></span>
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
<span></span></p>
<h4 class="date long">July 26th, 2016</h4>
<h4 class="date short">-07.26.2016-</h4>
</div>
<p class="downArrow"><i class="fa fa-chevron-down"></i></p>
</div>
<!--header text end-->
<img src="/img/love/main/edit/retina.jpg" alt="Main Image">
</div>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
</header>
<!--Header end -->
Remove the part where you have set the logo to z-index: 9999
Then add this to your css
.navbar-header button{
float:right;
}
It is a z-index issue, but z-index is tricky and only works when the elements have a position other than static (which is default).
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
...
</div>
{{-- Music --}} -------------------------------------------------
<div class="container" style="position:relative; z-index:98">
...
</div>
(I put the styling inline for clarity)
There are likely other way to fix this, but this was the quickest.
Pull the button outside of .navbar-wrapper and put it as the first element under .menu
That'll work :)