I have a CSS menu.
The problem is that in a ul li a span when I have a long string it doesn't break for the second line, it just continues on one line getting out of the menu.
Here's my CSS code if you want to take a look at it.
What is the problem here? (i have made a simple menu where it works, but in this case, of a dropdown menu - it doesn't)
here's the link http://jsfiddle.net/mr_mikey/nR2t6/
Remove the following style from your CSS:
#mainmenu ul ul a {
white-space: nowrap;
}
Could it be that you're using inline span tags instead of block-level div tags? Haven't tried myself but this could have an effect on the way overflow and wrapping is handled.
There's also a CSS3 property called "word-wrap" that you could try setting to "break-word".
Related
i have been fiddling around with this for a few hours now.
I have a vertical elementor nav menu and i want to apply a hover affect to it.
So far so good, but i only seem to be able to select the whole column and apply the affect onto that, not only the length of the text.
Here is an example of how it currently looks, the closing "brakets" are always at the same width at the end of the column:
Example 1:
Example 2:
What i want it to be like is on the end of the text - which is differnet for each menu item.
Like This:
My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - i tried with "a" as well which made it not work at all.
Thank you.
Max
You can not select only text. The text must be inside a html tag.
For example:
div {
color: green;
}
p {
color: red;
}
span {
color: blue;
}
<div>
<p>I am selectable with p { }</p>
I am not selectable as I am a text element of root div tag.
<span>Again I am selectable as I am wrapped with span tag.</span>
<div>
A link to the site would be helpful.
But the problem here is probably, that the element you're targeting is "display: block" or similar, making is a full-width element.
Try setting the a-tag to "display: inline" or "display: inline-block", which will make the width fit the element - not the parent div.
Alternatively, you could target each link as "nth"-elements of a list, but I would need to see the actual page to determine that, as Elementor is rarely just "Elementor". Your theme and additional addons play a part here as well.
Encountering strange issue in Froala,
This is how my Froala, editor looks like when un-ordered list is selected, but it's not appearing in the text-input.
This is how DOM looks like at this moment, indication presence of ul item.
But when I remove the overflow, property from fr-wrapper class inside froala-editor, then I can see the list item dot as follows.
Here is the overflow, property, removing overflow property below is doing manipulation on internal css of froala, I don't want to this.
I don't know why froala is not behaving in intended manner,
Expected behaviour should be like this as soon as user selects, the ul list item, without even touching or manipulating any internal css prop. like overflow etc.
add below lines in your css file. this will render the list style type that you have applied to the list items while editing the content through froala editor.
ul li {
list-style-type: inherit;
}
ol li {
list-style-type: inherit;
}
So I've been working on what I was helped with yesterday and I'm so close. My code is much cleaner now. I have 2 issues that still need resolving. I've been trying all morning and can't seem to get it.
I need to control of the height of the subnav. I had to change the height in "ul li a" to 100% from pixels so at least now it just wraps around the text, which is ok, but I will probably need to change that height eventually and don't want to do it by increasing the font size.
ANSWERED - I added a margin-down in % to the subnav and you'll see why based on the design. The problem with this is that once you slowly move the mouse over the white space the sub nav disappears. If you do it fast enough you can sometimes catch it. I had the same issue with the vertical spacers within the subnav but did some rearranging in the css and it seems to be fixed now. Any suggestions?
Can I have the single worded links center without compromising the vertical centering with the multi-worded links?
Is there a better way to add in "margins or buffers" instead of the "spacers" I'm using, or is this "okay"?
http://codepen.io/Compton/pen/iwKJm
--UPDATED CODEPEN--
http://codepen.io/Compton/pen/ufGCI
Thanks in advance.
The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here:
http://codepen.io/anon/pen/hzAaD
Referring to your original code, change your CSS as follows:
.subnav ul li {
margin: 0;
margin-top: 3px;
}
.subnav {
width:100%;
}
For point four, you don't need to add an empty list item for every "space" between each list item, this is bad practice as a list item is meant to actually be used for something, not empty space!
Instead, why don't you simply amend your ul li class so that you add a margin-right property:
ul li {
float:left;
width: 14%;
display:block;
**margin-right: 5px;**
text-align:center;
}
This will achieve the same effect as having those spaces so you can remove them from your html.
I am trying to create level 2 drop-drop down. I came bit close and stucked. Please assist me to complete it.
Here is the JsBin
li{list-style:none;line-height:30px;}
a{text-decoration:none;color:#c3c3c3;font-family:consolas;width:100%;}
a:hover{color:white;}
li{padding:5px;background-color:#5970B2;}
/*li*/a:hover{background-color:grey;}
ul#sddm{position:relative;}
ul#sddm ul{display:none;}
ul#sddm>li{float:left;}
ul#sddm>li:hover>ul
{white-space: nowrap;display:block;position:absolute;margin:0;padding:0;}
ul#sddm ul li:hover ul
{white-space: nowrap;display:block;margin-left:150px;
position:absolute;margin-top:0;padding:0;}
ul#sddm ul li:hover ul>li{}
It will be good for me, if someone explain what I was doing wrong..
Thanks in advance.
Here is the fiddle for demo http://jsfiddle.net/dineshswami/4pLt3/1/
Changes in css:
a{text-decoration:none;color:#c3c3c3;font-family:consolas; display:block;padding:2px;}
ul#sddm>li{float:left; position:relative;}
ul#sddm ul li:hover ul{white-space: nowrap;display:block;margin-left:150px;position:absolute;margin-top:0;padding:0;left:-2px;margin-top:-39px;}
Changes in html: I removed inline css
Problem: The problem was you was forcing the elements by giving inline css so they was not align properly where they want to be. Little changes in position where you mention absolute. So i change the left and top value you can see in css above.
As i mentioned the problem above, let me explain in detail:
To expand the the <a> tag to the entire width of <li> tag i just removed the css width: 100%; and add new css rules display:block;padding:2px;
To adjust the first drop down width i removed the entire inline css from html. so all elements are able to take entire width on basis of text.
To adjust the second level drop down i set the top and left properties to left:-2px;margin-top:-39px; Why i did this because there was a gap between in first level drop down and second level and margin-top to -39px because you have given line-height:30px; which is increasing the height so i have set the margin-top.
Change top and left properties to adjust
I have edited jsdin
I'm trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely "li a" element.
I've put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/
You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.
The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:
.Menu li a:hover {
background-color: rgba(0,0,0,0.3);
}
and it is working as expected. See http://jsfiddle.net/muNFY/
you don't need use :before to get desirable result. Fixed tour styles here http://jsfiddle.net/yWqK4/2/