When scrolling the page, the TextField on the page is visible on header area. The header is created with css and I am using TextField from material-ui.
I have never created an header with css before. Is there maybe some code that has to be included, when creating an header? see code below.
Any help is appreciated! Thanks in advance.
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
}
.toolbar__navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar__logo a {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
.spacer {
flex: 1;
}
.toolbar_navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li {
padding: 0 0.5rem;
}
.toolbar_navigation-items a {
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
color: black;
}
If anyone has the same problem, I fixed this by setting the z-index, see code below:
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
z-index: 1;
}
Related
I would like to make the effect of underlining links when hovering over styled components, for some reason hover is not working and not even after
export const Links = styled.div `
ul {
display: flex;
}
li {
color: #fff;
text-decoration: none;
list-style-type: none;
margin: 1.4vh;
cursor: pointer;
letter-spacing: 0.1rem;
&::after {
content: "";
width: 0;
height: 4px;
background-color: #ff914d;
position: absolute;
bottom: 0;
left: 0;
}
&:hover::after {
width: 100%;
}
}
`;
Two things are missed:
For nested selectors in styled components you can use this -
&:hover:after {
width: 100%;
}
Since, pseudo selector ::after has position absolute, in order to get the underline effect, make as position relative.
here is the final output
export const Links = styled.div `
ul {
display: flex;
}
li {
color: #fff;
text-decoration: none;
list-style-type: none;
margin: 1.4vh;
cursor: pointer;
letter-spacing: 0.1rem;
position: relative;
&::after {
content: "";
width: 0;
height: 4px;
background-color: #ff914d;
position: absolute;
bottom: 0;
left: 0;
}
&:hover:after {
width: 100%;
}
}
`;
I have some trouble with bootstrap carousel. I cannot remove blue under lines.
Can someone help me? It's not text decoration (text-decoration: none; doesn't work).
.carousel {
width: 100%;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none !important
}
.carousel-inner,.carousel,.carousel-indicators {
text-decoration: none;
box-shadow: none;
}
.carousel-indicators {
bottom: -150px;
text-decoration: none !important
}
.section1-text {
line-height: 1.55;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
width: 100%;
text-decoration: none !important
}
.section1-text p {
color: white;
font-size: 25px ;
margin-bottom: 30px;
width: 80%;
z-index: 2;
}
Can someone help me how can I move my footer to the bottom using position: relative?
FOOTER PROBLEM PHOTO
#page-footer {
.list-inline {
display: none;
}
}
.s-footer {
background-color: $primary;
margin-top: auto!important;
padding: 0px !important;
border-top: 1px solid $primary;
font-size: 0.875rem;
color: $default;
.tool_dataprivacy {
display: none;
}
.helplink {
display: none;
}
}
.c-container {
width: 100%;
text-align: center !important;
}
This is the code from the theme, i haven't made any changes from that code. Thank you!
You need to set min-height to container
.c-container {
width: 100%;
text-align: center !important;
min-height: 80vh; //adjust this accordingly
}
Or make the footer fixed
.s-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
I've been struggling with getting my hamburger menu to slowly open. It took me a long time to even create it. :) Can anyone tell me if this CSS code allows for having it gradually open?
http://codepen.io/kiddigit/pen/EKRgQz
#media only screen and (max-width: 700px) {
body {
background-color: #white;
}
img {max-width: 100%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.wrapper {
border: 0px;
padding: 1px;
background-color: white;
}
.content {
background-color: white;
border: none;
margin-left: 100px;
margin-right: 100px;
}
.menu-btn div{
float: left;
padding-right: 0px;
margin-top: 0em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.menu-btn span:last-of-type {
margin-bottom: 0;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
width: 80px;
float: left;
margin-right: 0;
margin: 0;
}
.main-nav {
border: none;
}
a {
font-size: 10px;
color: white;
}
.responsive-menu li {
padding-left: 5px;
font-size: 10px;
line-height: 25px;
list-style-type: none;
background-color: black;
}
.expand {
display: block !important;
}
$( '.menu-btn' ).click(function(){
$('.responsive-menu').slideToggle('slow');
});
UPD: Smooth appearing of element when it changes display from none to block can't be achieved with CSS. JQuery has some functions for that, toggle() and slideToggle(). slideToggle looks better for dropdown as it changes height of element from 0 to its natural height. In brackets you can add animation speed, slow is equal to 600 milliseconds, time in milliseconds also can be used: $('.responsive-menu').slideToggle(500)
Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}