i'm just learning react and wanted to used react-paginate for pagination purpose but the styling is not working atm even though i've already put the necessary css on my global css file(index.css)
<div id="react-paginate">
<ReactPaginate
previousLabel={'<'}
nextLabel={'>'}
breakLabel={...}
breakClassName={'break-me'}
pageCount={pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={10}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
</div>
my css file
#react-paginate ul {
display: inline-block;
margin-left: 20px;
padding-left: 0;
}
#react-paginate li {
display: inline-block;
border: 1px solid rgb(224, 224, 224);
color: #000;
cursor: pointer;
margin-right: 3px;
border-radius: 5px;
margin-bottom: 5px;
}
#react-paginate li a {
padding: 2px 5px;
display: inline-block;
color: #000;
outline: none;
}
#react-paginate li.active {
background: rgb(224, 224, 224);
outline: none;
}
any help would be appreciated, thank you
If you are using bootstrap 4 use below classes
breakClassName={'page-item'}
breakLinkClassName={'page-link'}
containerClassName={'pagination'}
pageClassName={'page-item'}
pageLinkClassName={'page-link'}
previousClassName={'page-item'}
previousLinkClassName={'page-link'}
nextClassName={'page-item'}
nextLinkClassName={'page-link'}
activeClassName={'active'}
You can use bootstrap classes which are for bootstrap pagination as you have
containerClassName={'pagination'} /* as this work same as bootstrap class */
subContainerClassName={'pages pagination'} /* as this work same as bootstrap class */
activeClassName={'active'} /* as this work same as bootstrap class */
below css work for me. I put this css in app.global.css
.pagination > li {
display: inline-block;
padding-left: 0;
}
.pagination > li {
list-style: none;
border: 0.9px solid;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #2c689c;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
.pagination>li.active>a {
color: #fff;
background-color: #218838;
border-color: #1e7e34;
}
/* Style the active class (and buttons on mouse-over) */
.pagination > li > a:hover {
background-color: #218838;
color: white;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
padding: 0px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
display: none!important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-bottom-right-radius: 4px;
margin-right: 0;
padding: 0px!important;
border-top-right-radius: 4px;
display: none!important;
}
id's dont work in react, we need to use refs instead if id.
I would recommend to use classes (className) in this case
Related
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
Having trouble getting the submenu items under "LEARN" to wrap (Articles / Videos).
influentagency.com/clients/cgc_build_062117
I've pasted some of my SASS code, tried different things, but nothing seems to work. Added the wp_bootstrap_navwalker function, tried adding classes, does not wrap no matter what I try.
Any ideas what I'm missing here? Thanks in advance!
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #777;
}
.dropdown-menu {
flex-wrap: wrap;
}
.navbar{
border-radius: 0;
webkit-border-radius: 0;
min-height: 1px;
margin-bottom: 0;
&.navbar-default {
border: none;
background: #fff;
padding: 0 15px;
#navbar-menu{
float: right;
&.navbar-collapse{
padding: 0;
margin: 0;
.navbar-nav{
float: none;
margin: 0;
padding: 0;
li{
display: inline-block;
float: none;
margin: 23px 0 0 0px;
a {
color: #333;
font-size: 14px;
display: block;
text-decoration: none;
#include OpenSansSemiBold;
padding: 4px 8px;
&:hover{
color: #9dcb94;
}
}
&.item-right{
margin-left: 25px;
a{
background: $green;
color: #fff;
border-radius: 2px;
padding: 10px 14px;
&:hover{
background: $green_hover;
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: #fff;
}
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: $green;
}
}
.sub-menu{
display: none;
}
}
}
}
}
}
The issue is that your css is making all menu items display-inline, even ones in the dropdown menus:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav li{
display: inline-block;
/* other styles here also */
}
You need to include the following in your css to override that:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav .dropdown-menu li{
display:block;
}
To do this, you need to add the following to your SASS:
.navbar-nav{
[...]
li{
display: inline-block;
[...]
}
.dropdown-menu li { display:block;}
}
https://codepen.io/jamesbcn/pen/weYdPw
I'm attempting to copy and paste a navigation bar, that I'm working on into CodePen but the CSS is not being displayed properly.
.navbar-brand {
padding: 0px;
height: 90px;
}
.navbar-brand>img {
height: 100%;
padding: 5px 15px 5px 5px;
width: auto;
margin: center;
}
.nav >li >a {
margin-top: 0;
}
.nav ul{
display: flex;
background-color: #C2A76F;
list-style-type: none;
padding: 0;
}
.nav ul a{
text-decoration: none;
text-align: center;
color: #FFF;
display: block;
padding: 5px;
border: 2px solid white;
}
.nav ul a:hover{
background-color: #816F4A;
}
.nav li{
flex: 1 1 0;
}
p{
padding-top: 10px;
font-size: 20px;
}
You have a couple of problems there, one being the structure in your HTML doesnt look like it matches what you're expecting in your CSS, and the other being that you're treating nav as a css class, rather than an element (Prefixing a css term with a period means the browser is trying to match an element with a css class like <div class='nav'></div>, rather than the HTML element <nav>).
E.g.
.nav >li >a {
margin-top: 0;
}
should be
nav >li >a {
margin-top: 0;
}
I have designed a navigation bar for my website using the following CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
li {
float: left;
border-right: 1px solid #ffb366;
}
li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
li a:hover {
background-color: #e67300;
}
</style>
This is a version of the horizontal navigation bar example documented at w3schools.com: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
My problem is that it affects other <li> and <ul> elements used in my website as well, not just the navbar. How do I ensure the navbar ones stay separate from other <li> and <ul> elements, using solely CSS? I've started learning CSS quite recently, so I'm certain I'm missing something pretty fundamental here.
Use may want to use css classes
http://www.w3schools.com/cssref/sel_class.asp
ul.mylist {
.....
}
ul.mylist li {
.....
}
ul.mylist li a {
.....
}
ul.mylist li a:hover {
.....
}
Also make sure to add the class to the html
<ul class='mylist'>
<li>......
Similar to man's answer, enclose the ul elements in a div and set the class of the div to navbar, for example. Then change your CSS code to this:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
ul.navbar li {
float: left;
border-right: 1px solid #ffb366;
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
I'll modify your code to demonstrate how you can use classes to specify which ul tag you wish to style
<style>
ul.myNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
}
ul.myNav > li {
float: left;
border-right: 1px solid #ffb366;
}
ul.myNav > li a {
display: block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.myNav > li a:hover {
background-color: #e67300;
}
</style>
And all you have to do is add the class to your preferred ul element in your html.
<ul class="myNav"> .... </ul>
li:not(:first-child){
code...
}
li:not(:last-child){
code...
This is a CSS issue: i have a drop down menu created with the following code:
#menu_container ul {
list-style-type: none;
float: left;
padding: 5px 0;
display: inline;
}
#menu_container ul li {
display: inline-block;
float: left;
}
#menu_container ul li a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 5px 10px;
margin: 0 10px;
}
#menu_container ul li a:hover {
background-color: #000;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a {
background-color: #000;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#menu_container ul li ul {
padding: 0;
position: absolute;
display: none;
opacity: 0;
visibility: hidden;
}
#menu_container ul li ul li a {
display: block;
}
#menu_container ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index: 2;
background-color: #fff;
color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#menu_container ul li ul li:hover {
background-color: #000;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;;
}
#menu_container {
border-top: 1px dotted #DDDDDD;
border-bottom: 5px solid #DDDDDD;
padding: 0px 28px;
}
#menu_container .cat_menu { border-left: 1px dotted #DDDDDD; }
The site is edicionesparalelo.com
As you can see if you access it, when you hover over "Blog" the elements i want to display DO display, but not is i want. I want them to display one below the other. I mean:
Reseñas
Textos
And not like they appear:
Reseñas Textos
I will really thank any help; this is driving me mad. Thanks!
I think the answers above are almost there.
I got it to work with this in my Google Dev tools. It's best not to use !important, so try removing them after you verified this works:
sub-menu li a {
display: block;
width: auto;
margin: 0 !important;
}
.sub-menu li {
display: block !important;
float: none !important;
}
Add a new rule to .sub-menu:
.sub-menu {
display: block;
width: 90px;
}
All you need to do is remove that float and that display:inline-block from your elements.
For example:
.sub-menu > li {
float: none;
display: block;
}
Once this is applied your list items will break into new lines again.
And by the way:
Your defintion of
#menu_container ul li {
float: left;
display: inline-block;
}
is quite general. This is the source of your problem. It matches too many li elements.
Target the problematic elements and solve the issue by doing something like this:
#menu_container ul li ul {
width: 70px; /** desired_width **/
}
#menu_container ul li ul li {
width: 100%; /** 100% width makes them stack on each other and not side by side **/
display: block
}
That should do it.