I'm having an issue where when my nav items were set to inline-block, the sub-menu would render right below the the appropriate <li>, like these two examples:
and
Now that it is a inline-flex, it is rendering right on top of the li instead, covering it.
I tried manually positioning the submenu 52px down, but that is only a solution if the <li> is on the top row, since once it's on the 2nd row it would now need to be 104px down.
Is there any good way to fix this?
URL in comments below
Although these are default values. Try to set flex-basis: 0; also make sure the flex-wrap: nowrap; is set. As comment instructed it is wiser to share your code to have a detailed answer.
Edit 1:
Thank you for the link to the code. Question is now clear, solution can be achieved by giving higher order number to the .navPage-subMenu class.
But first please remove the position: absolute from the class name .navPage-subMenu then add the order value of you like higher then <li>'s have. Example:
.navPage-subMenu.is-open {
order: 111; /*must be higher than <li> order numbers*/
}
Related
I've been facing a problem - I need to make a category page for an e-commerce website. The client's required design depicts that they need to get a horizontal line after the category title (which is dynamic).
I've done it to this part.
However, the issue arises when the client needs to change the category name. In the attached picture, it says "Category 2". Client may change it to 'Men's Collection', 'Winter Collection', 'Men' or whatever.
The problem is, since we don't know about the width that this category name is going to occupy, how can I manage the horizontal line's width (highlighted in a red box).
I'm also putting a screenshot of the css that I've applied.
The position of the line being absolute, width does need to be managed.
How can I manage this width? :(
Use a flexbox to solve the issue- see the example below:
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.wrapper:after {
content: '';
flex: 1;
height: 1px;
background: #ccc;
margin-left: 10px;
}
<h1 class="wrapper">
category name
</h1>
IDK why is my question demoted.
However, I've done a little thing that will work fine =>
For the "Sort By" section, I've made the background color white.
For the whole row containing the category, :after line and Sort By section, I've hidden the overflow.
That's working fine, however I'ld have appreciated only if I could get some other approach to work.
Well it should be dynamic if you specify the width of the :after element as a percentage. Since it is getting the width of the parent (which is the title), the width will adjust on the percentage amount of whatever the title is.
I am pretty new to css and html and I am trying to create a drop-down menu that has 3 or 4 columns of links per drop down. I want the columns to be inline with each other. I have managed to accomplish that but the links in each column are going on two or more lines and I'd like them to display on one.
I've been messing around with the css but can't seem to figure out how to make them display on one line per link.
In my codpen, you will see what I am working with: http://codepen.io/anon/pen/vLQGqM
The best I've been able to do is make
.tlgnav .tlgnav-column {
width: 100%;
}
, but this makes the columns stack on top of each other, which is not what I want.
I am thinking it might have something to do with my .tlgnav li being set at width of 16.66% but if I change that, my menu doesn't fill the width of the screen.
Can anyone tell me what I am doing wrong?
You can use white-space : nowrap to avoid the line breaking, but maybe it's a better way to doing this. I answer with this solution but if someone gets something better follow it.
http://codepen.io/anon/pen/BjGzgZ
.tlgnav h3 + ul li {
white-space:nowrap;
}
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.
Here is a demonstration: http://jsbin.com/egezog/edit#html,live
Sorry if this is newby, but I can't figure this out. I have a title, and I need (in decoration purposes) a line going from its edge to the right of the page (not an actual page, but a wrapper, but I have overflow hidden anyway). The wrapper is fixed in width, but the titles vary in length. I can't use absolute position, and I prefer not to use tables. And if we get this sorted out...
Here: http://jsbin.com/ibeciv/edit#html,live. So in the end, I actually prefer this all right aligned. You may ask, why do I need advice if it's there, implemented? Well, as you may see, the title is in two rows, which is unacceptable in my situation, and also, I prefer not to use tables.
I guess I can use float:right, to right align, but well, it depends on the implementation that I hope you'll advise to me. Thanks!
PS: jsfiddle is down for me right now, so here I used jsbin.
http://jsbin.com/ujiquq/edit#html,live
Will work in IE8 and all modern browsers. The background of the parent element can be anything. The line will still be vertically centered no matter what font-size is chosen.
HTML:
<h3><span>The title</span></h3>
CSS:
h3:after {
content: '\00200B';
background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
display: block;
overflow: hidden;
}
h3 > span {
float: right;
padding-left: 5px;
}
Here is a solution without using tables:
http://jsbin.com/ujawej/5/edit
And here is the one with tables (from my comment):
http://jsbin.com/osovev/2
Write like this:
HTML
<div class="title"><span>Title Here</span></div>
CSS
.title {text-align:right;border-bottom:1px solid red;}
span{background:#fff;float:right;margin-top:-9px;}
Check this http://jsbin.com/ibeciv/3/edit
UPDATED
Check this http://jsbin.com/ibeciv/4/edit
If you go to the first blog item (Mona) and expand it using the '+' icon. The image thumbnails are aligned 24px from the left using a margin. This works in every browser but IE7 which ignores the margin on the first list item.
http://www.dririser.co.uk/index.php
CSS
.artistMeta li {
float: left;
margin: 0 0 24px 24px;
position: relative;
width: 160px;
}
There is a similar question on here but the there was no real answer and I can't use their solution.
Why is ie7 ignoring the left-margin on my first list item (only)?
Any ideas?
just a quick test.. not sure if it will work.. but try adding a display:block on your li and don't use the shorthand for the margin, instead use margin-left and margin-bottom...
it seems to me that IE is not refreshing the style of the elements, because when i inspect the elements, the navigator adds the correct margins...
If that doesn't work.. you might want to put the style inside the tag (since you're using JS to add the images), i know it's not elegant, but i guess that could force the navigator to set the style on the li
and if that doesn't work.. then i've no idea what could be wrong =P. I hope this helps...
Good Luck!
The problem IE7 is having here isn't in your CSS file, it's in your javascript in global.js. Specifically the following line ...
$(".artistMeta > li:nth-child(3n+1)").addClass("articleSlideOdd");
As per the convention in CSS, JQuery starts the child count at 1 for nth-child (as in the first child is nth-child(1)), where as, ie7 is expecting it to start at 0. So with ie7 3n+1 matches the 2nd, 5th, 8th item and so on.
Looks like JQuery isn't handling ie7 properly, so you'll need two statements to cover ie7, and everything else.