i bought a bootstrap material look template but i did some modifications, but when i submit a transparent css on the top navbar, it is not working i don't know how!, i used the backgroung-image, webkit, and a simple css background transparent but not working, even with !important not successful,i think it has a default color because when i put it a transparent css code it turn into the body default color same as facebook body background color i think it is this one #f4f4f4, any help?
Html code
<div class="app-content">
<div class="box">
<div class="navbar">
<div class="navbar-menu">
<ul>
<li>
Menu 1
</li>
</ul>
</div>
<!--start content page-->
<div class="app-content">
<div class="box">
<div class="navbar">
<!--start content-->
Related
Designing a single page application in reactjs.I have a fixed navbar on the top of the page and i have 4 section .on click of link in navabr it jumps to that particular section.But i want to highlight that li with small border below.if user scrolls to any section without clicking link in navbar,the link must be highlighted with border.
// header.js
<ul className="col-2 flex-row flex-justify-align-center ">
<li className="navigation__link">Problem</li>
<li className="navigation__link">Solution</li>
<li className="navigation__link">Footprint</li>
<li className="navigation__link">Services</li>
<li className="navigation__link">Contact</li>
</ul>
function App() {
return (
<div className="App">
<div id="problem"></div>
<Header></Header>
<div id="solution">
<Solution></Solution>
</div>
<div id="footprint">
<Footprint></Footprint>
</div>
<div id="contact">
<Contactus></Contactus>
<Footer></Footer>
</div>
</div>
);
}
Question is unclear because I didn't get how to frame question for this requirement.
You need to use scroll spy. Visit this git repository React-scrollspy.
relavent question: How to implement a scrollspy with React
I have the following code in html:
<nav class="box">
<div class="logo">
<button class="c-hamburger c-hamburger--htx linksbuendig">
<span>toggle menu</span>
</button>(...)
</div>
</nav>
<div class="relative box">
<div class="nav">
<ul>
<li>
Login
</li>
</ul>
</div>
and this in CSS:
.c-hamburger:focus ~ div.nav {
margin:0;}
so if the button is focused the div should change the margin. But it won't work, until i copy the code for the button 1 to 1 directly over the div with the class nav. Why does it so and what can I change? Just copy solves the problem until now, but then is the full page destroyed, because there're other elements in between etc.
JS or sth. like that is not allowed. Please only CSS resp HTML.
Beforehand: Thanks!
I'm having trouble with aligning a container-fluid within bootstrap. I've attached a screenshot of what I'm trying to achieve. The list items on the bottom left should align with the text at the top (which is contained in a container). The newsletter section on the bottom right (red background) should span the entire width from the center to the edge of the screen. The content within the newsletter section should also be aligned with the text at the top.
Here's what I currently have for the code at the bottom:
<div class="container-fluid">
<div class="col-md-12">
<div id="footer" class="col-md-6">
<ul>
<li>About Us</li>
<li>Consumers</li>
<li>Sites</li>
<li>Operators</li>
<li>Contact Us</li>
</ul>
</div>
<div id="newsletter" class="col-md-6">
<h4>Subscribe to our newsletter to receive the latest news about Poqeta </h4>
</div>
</div>
Thanks for any suggestions!
bootstrap-grid
You can wrap your footer in a div that you give a background that is half of the screen width, either using CSS gradients (if your only concern is modern browsers) or with absolutely positioning elements or images. See this answer for more information. Then within this "footer wrapper" you place a container, and within this container you define your columns. For each column you set the background color again. This will "overlay" the background color of the footer within the container.
<div class="footer">
<div class="container">
<div class="col-sm-8 left">
left section, list items
</div>
<div class="col-sm-4 newsletter">
newsletter section
</div>
</div>
</div>
.footer {
background: linear-gradient(90deg, #ffffff 50%, #ff0000 50%);
}
.left {
background: #ffffff;
}
.newsletter {
background: #ff0000;
}
See this fiddle for an example, you may want write some CSS for mobile (depending on what breakpoint you use for column wrapping, -sm, -md or -lg)
Change
<div class="container-fluid">
to
<div class="container">
To make background full page, try this:
<div class="container-fluid">
<div class="container">
...
</div>
</div>
You can make "padding: 0" on "container-fluid" or "container" to make it straight
This is a live demo: http://baogiadientu.com/demo/fridgevan/
And the result that I want: http://baogiadientu.com/demo/fridgevan/images/demo.png
I want to add a background with an infinite width to two elements (.top-bar and .nav). I have tried to do the same with .bgwhite's background but a scroll bar is appearing, which is not what I want. Does anyone have any advice on how to achieve this without a scroll bar?
Here is my HTML structure:
<div class="container">
<header class="clearfix">
<div class="bgwhite"></div>
<div class="logo">
<img alt="logo" src="images/logo.png">
</div> <!-- end .logo -->
<div class="beside-logo">
<div class="white-spce"></div>
<div class="top-bar">
</div> <!-- end .top-bar -->
<div class="nav">
</div> <!-- end .nav -->
</div> <!-- end .beside-logo -->
</header>
</div> <!-- end .container -->
I'm sure we would have to see the CSS in order to answer to this, but I suppose you have a .css file linked to that .html document, am I right?
In this case, just set the background image to body and mess around with the properties available for the background attribute.
body {
background: url(images/yourbg.jpg) fixed center repeat-x;
}
And in case you mean to set a white background with a bit of transparency to it, so that the site's background is still coming up from back there, try this:
.nav {
background: rgba(255,255,255,0.5);
}
Hope this helps, it's what I understood from the question.
Is there any easy solutions to get parallax effect up and running really easy?
I just want a simple and neat effect on my header. This is my page: www.arcanova.no/bolig
I want the header text "Bolig" to scroll faster than the picture behind it.
Here is my html code:
<section class="band banner">
<div class="container">
<div class="row">
<div class="columns sixteen">
<div class="duk"><p></p> </div>
<div class="overskrift_firma">
<h2>Bolig</h2>
</div>
</div> <!--/columns sixteen banner-->
</div><!--/ row-->
</div> <!-- / container-->
</section> <!-- / band -->
The picture is the background of the band banner section class.
See this fiddle
$(window).scroll(function(){
$('#back').css({'top':''+(-($(this).scrollTop()*0.05))+'px'});
});
Hope from above you will get an idea of how parallax works