I have some Wordpress Avada Tabs here:
https://www.judoclubsihltal.ch/turnieranmeldungen/
Unfortunately they all have a different heigth:
https://www.screencast.com/t/cwQ65Y9g
So i would like to have the <a> part the same heigth as the <li>.
I already tried with display: block, but unfortunately i did not succeed.
#post-6702 .nav .nav-tabs li a{
display: block;
}
Best Regards
Florin
simply give them a fixed height.
.tab-link {
height: 50px;
}
Related
I used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
how can i configure the Ckeditor to add automatic a <span> tag in a new <li></li> element.
Like so <li><span></span></li>
Thanks for helping
As an alternative route to style the UL bullet points differently from the text within them, there is a CSS hack using :before you can use - it's not pretty though! See fiddle by BoltClock here: http://jsfiddle.net/BoltClock/q9RRg/
The relevant CSS code is this:
ul li {
color: black;
list-style-type: none;
margin-left: 1em;
}
ul li:before {
content: '\2022 ';
color: red;
padding-right: 0.5em;
}
If this is not usable, the secondary option would be to post-process your data. During your saving phase, simply add the spans to any LI element where the first child is not yet a span. I do recommend adding a class to the spans for future usage and easy targeting as well.
I am using Twitter bootstrap and CSS to style a dropdown. I have a child element that floats on the left and then text that flows to the right of it. Unfortunately the text does not flow within the containing box and spills over.
I' not sure if this is a Twitter bootstrap issue or just a CSS issue (ultimately a CSS isseu I know but worth tagging this as Twitter Bootstrap too since I'm using that framework).
I've tried several combinations, and obviously not the right combination to achieve the behavior I'm after. Does anyone know how to fix this? A working example of the problem is here:
http://ec2-54-215-108-9.us-west-1.compute.amazonaws.com/
(click on the International Gymnast link on the right)
Here is a screenshot demonstrating the issue as well.
Thanks,
Karl..
Its because links in dropdowns in TWBS have white-space: nowrap;.
The easiest solution i could think of is creating a custom CSS class:
.dropdown-menu > li > a.btn-wrap {
white-space: normal;
}
And then adding class="btn-wrap" to your <a> element
.dropdown-menu > li > a ,
.btn.btn-default.btn-large.btn-left > span {
white-space: normal;
}
I would also reduce the line-height on the a tag.
Reduce the height on [.live-mon]
Remove the height on the a tag.
Increase the padding top and bottom on the a tag.
.intl-link li a {
overflow: hidden;
}
.intl-link li a {
line-height: 19px;
}
.dropdown-menu.intl-link > li > a {
padding: 7px 20px;
}
.live-mon {
display: block;
height: 62px;
width: 92px;
}
You would get something like this:
Hi guys I have a href on my page but it's waaay to wide and i've tried adding display:block's to it but it didn't help.
I have a lot of CSS so I think I shouldn't link my whole document, it's a mess.
I can give the link on which you might be able to test?
It's about the changing links under the slider on the frontpage.
Use:
.cycle-slideshow a {
display: inline-block;
}
EDIT: as pointed in the comments you have to override this behavior also in the pseudo-states (hover, focus and active). You can force that rule using display: inline-block !important; or with:
.cycle-slideshow a,
.cycle-slideshow a:focus,
.cycle-slideshow a:hover,
.cycle-slideshow a:active {
display: inline-block;
}
The display:block; is what causes the problem because it extends them to 100% width. Remove the display:block; from the link-style and also from the :hover-style.
I got the same problem but then I realized I just forgot to close with an </a>tag
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block