I need help with Navigation Bar Menus in Smartphones with CSS
On a computer the website is fine, but on a smartphone it's a white box
The only way I can customize it, is with Additional CSS
I know that most of the code I use is worthless
All I want is to remove the white box in Mobile View
Please see the screenshots
first
The website is at https://www.elans.gr
second
The code I use:
.header-filter-gradient {
background: linear-gradient(45deg, rgb(0,0,0) 0%, rgb(0,0,0) 100%);
}
.header-filter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-position: center center;
background-size: cover;
}
.header-filter-gradient {
background: linear-gradient(45deg, #00000 0%, #00000 100%);
}
.navbar {
background-color: gray;
color: white;
}
.navbar.active {
background-color: #424bf4;
color: white;
}
.navbar.hover:not(.active)
{
background-color: #000;
color: white;
}
just add following css in your style.css
#media (max-width: 768px) {
.navbar.navbar-fixed-top .navbar-collapse {
background: #211818; //color that you need to change
color: red !important; // your text color
}}
Related
I am making a webpage with header menu,
and content has gradient text somewhere.
I just found out that the text is visible through the header menu, it seems the text somehow makes the header menu transparent.
the text is visible through the menu
supposed to look like:
Is this normal? Is there any other way to make gradient text without affecting other elements?
css of the header and the text looks like this by the way:
#header {
position: sticky;
top: 0;
background-color: black;
height: 100px;
align-items: center;
padding: 10px 10px 10px 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.content_right_text {
font-size: 60px;
font-weight: 700;
background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 10%, #ffffff 50%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
Try adding a z-index to your header element so that it stays on top even while scrolling as the position is set to sticky.
#header {
position: sticky;
.
.
.
z-index: 1;
}
I'm trying to create a simple little frontend project, and I need to make some text discernible from a background image.
How can I make the background behind the text blur? It's just blurring the container, I'd like to only blur behind the actual text.
My current code for this text:
.center h1 {
font-size: 100px;
font-style: italic;
font-family: 'Montserrat', sans-serif;
background: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
backdrop-filter: blur(10px);
}
/* added by editor for deomnstration purpose */
body {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5b/St_Mary%27s_Church%2C_Castle_Street_1.jpg');
background-size: cover;
}
.center {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -100%);
text-align: center;
width: max-content;
}
<div class="center">
<h1>GLUSH</h1>
<!-- Added by original poster for better running -->
</div>
This is just ending up like this:
Is there any way to do this? I was working with background-clip earlier...
Just use backdrop-filter and play with the blur and saturate filter to your liking. blur obviosly blurring the background while saturate givin it more "color depth"
h1 {
backdrop-filter: blur(10px) saturate(70%);
}
/* to make the header only as wide as the content and centering it */
h1 {
width: min-content;
padding: 20px;
margin: 0 auto;
}
/* added by editor for deomnstration purpose */
body {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5b/St_Mary%27s_Church%2C_Castle_Street_1.jpg');
background-size: cover;
}
h1 {
font-size: 5em;
}
<h1>GLUSH</h1>
I am making the select2 combo box, I want to remove blue color hover style, but I cannot remove it, does not exit. How can I do it? Please give me a solution, thanks
EXAMPLE
Js
jQuery(document).ready(function($){
$('select').select2({width:100});
$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
});
view
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
CSS
.select2-dropdown.select2-dropdown--below{
width: 148px !important;
}
.select2-container--default .select2-selection--single{
padding:6px;
height: 37px;
width: 148px;
font-size: 1.2em;
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
width: 40px;
color: #fff;
font-size: 1.3em;
padding: 4px 12px;
height: 27px;
position: absolute;
top: 0px;
right: 0px;
width: 20px;
}
Add the following to your CSS code since the code causing the blue hover effect is in a minified css file and is hard to edit:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: lightgreen !important;
color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: inherit;
}
Here is your updated JSFiddle
If you simply would like to remove the blue background from the element on :hover you can add this line of of code:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: inherit;
color: inherit;
}
DEMO
Used to this css for hover and default background-color
html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: green;}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{color:#000;}
html .select2-container--default .select2-results__option[aria-selected=true]{background-color:red;}
Demo
add in style
.select2-container--default .select2-results__option[aria-selected="true"]
{
background:#fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
background:green;
color:#fff;
}
I am trying to get a certain effect on a header for a mockup. It has white glow almost not noticeable. You will see it in this picture i provide behind the title and sub title. How can i get that glow effect with css? I do have a header with the entire thing but is that a good idea to use an image for an entire header? Also i want those two lines near the subtitle. Is it possible to code those lines? And last, the button "order now", will that be possible to make with css or should i just use an image of that and link it?
mockup
jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [what i currently have]
<header>
<h1>Taffies Cupcakes</h1>
<h2>Fresh and tasty</h2>
</header>
body{
background-color:#e7d2c9;
}
header h1{
font-family:georgia;
font-size:46px;
color:#784f3d;
text-align:center;
margin-top:50px;
}
header h2{
font-family:segoe script;
font-size:32px;
color:#846a5f;
text-align:center;
}
All of this is possible to do in CSS 3, I wouldn't recommend it though. Using an image for the button and the header is the best idea if you want it to look the same in all browsers. If you want to do it in CSS anyway try this:
HTML:
<header>
<div class="shadow"></div>
<h1>Taffies Cupcakes</h1>
<h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>
CSS:
header > .shadow {
width: 0px;
height: 0px;
margin: 0px 50%;
box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
height: 1px;
width: 100px;
margin: 5px 20px;
background-color: #846a5f;
display: inline-block;
vertical-align: middle;
}
As the other answers have mentioned, radial-gradient is probably the way to go here. Just apply it to the header element instead of using my version with box-shadow (which might be a little hacky to some).
Update for the button:
HTML:
<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>
CSS:
button.special {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
background-color:#784f3d;
color: #e7d2c9;
text-align: left;
border: 0;
outline: 0;
border-radius: 5px;
height: 42px;
}
button.special > .icon {
width: 27px;
height: 27px;
/*background-image: url('triangle-button.png')*/
position: absolute;
margin: 5px;
}
button.special > .headline {
margin-left: 42px;
font-size: 18px;
}
button.special > .description {
margin-left: 42px;
font-size: 12px;
}
http://jsfiddle.net/ezdr3xdg/17/
Use CSS radial-gradient()
DEMO 1:
body {
height: 100vh;
background-color: #e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%);
}
DEMO 2:
body{
height:100vh;
background-color:#e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%);
}
DEMO 3:
body {
height: 100vh;
background-color: #e7d2c9;
position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}
I have update your jsfiddle with a starting template of sorts. Its CSS# gradients and border-radius. http://jsfiddle.net/ezdr3xdg/7/
the button:
<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>
CSS:
The Button:
#order_now{
background: linear-gradient(#846a5f, brown);
width: 200px;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 12pt;
font-weight: bold;
}
#sub_order{
font-size: 10pt;
font-style: italic;
}
#triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
display: inline-block;
}
#text{
display: inline-block;
}
The Background:
body{
background:linear-gradient(to right, red, blue, red);
}
this should be enough to get you started.
I am attempting to make a box that displays text when you hover over it.
this is the code I have currently:
<style>
/* WHILE HOVERED */
.one:hover {
box-shadow: 0 15px 30px black;
background: #00576f;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}
/* WHILE BEING CLICKED */
.one:active { }
.other {
width: 200px;
height: 200px;
line-height: 100px;
color: white;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
margin-top: 10px auto;
/* BACKGROUND GRADIENTS */
background: #00485c;
</style>
<body>
<center><div class="other one"/div></center>
</body>
I know that there is probably a simpler way to do what I have so far, but I only need to know how to make text appear in the square when you hover over it.
thanks.
Well you can do this in pure CSS, but JavaScript may be the better option if you're unable to change the HTML markup. At any rate:
.one:hover:after {
content: "My text here!"
}