Archived topic
CSS in Element Question
5 replies · Started by Austin on July 4, 2021
Hi,
I am not sure if I am going about this the correct way. I have css code for a navigation tabs function that I would like to incorporate into page content areas of my website using a container block. Is it possible to create "Elements" - "Hook" - "Generate Inside Container" and use the created label name in the additional css class area, and this input the navigation tab function?
Is there a better way to go about this?
Thanks
Hi Austin,
Can you link us to the site in question?
So we can have a look at the code.
You can use the private info field.
Let me know :)
Hi Ying,
The link to the site is http://www.orprops.com
I have input the container with the label name at the bottom of the page under "Search homes by criteria", however it doesn't appear in the container. Here is the css code I am using, and I have created an "Element" with the information in the previous above question. Please let me know if I should adjust the element settings? Thanks for the help again.
body {
background: #EDECEC;
}
.nav-tabs {
display: inline-flex;
width: 100%;
overflow-x: auto;
border-bottom: 2px solid #DDD;
-ms-overflow-style: none; /*// IE 10+*/
overflow: -moz-scrollbars-none;/*// Firefox*/}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
border-width: 0;
}
.nav-tabs>li>a {
border: none;
color: #666;
}
.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
border: none;
color: #4285F4 !important;
background: transparent;
}
.nav-tabs>li>a::after {
content: "";
background: #4285F4;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: 1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
transform: scale(1);
}
.tab-nav>li>a::after {
background: #21527d none repeat scroll 0% 0%;
color: #fff;
}
.tab-pane {
padding: 15px 0;
}
.tab-content {
padding: 20px
}
.nav-tabs::-webkit-scrollbar {
display: none; /*Safari and Chrome*/
}
.card {
background: #FFF none repeat scroll 0% 0%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
}
I'm not sure I fully understand what you are trying to do.
There's no content in the container block, so most of the CSS won't apply.
Can you show me the navigation where the code is working?
Hi Ying,
Sorry I had the wrong code input. I have since got it resolved.
Thanks
No problem :)
