I'm wondering how mashable.com hides its menu button - which appears in the top right hand corner - when the page is above a certain width and disappears when the page is below a certain width. A specific CSS rule:
html.no-touch .main-menu li.menu
{
display: none;
}
takes precedence over the rule that displays the icon:
.navbar .nav > li
{
display:block;
float: left;
}
but I can't see how it's doing it since disabling JavaScript appears to cause no ill effects and none of Css classes applied to parent elements seem to change. It seems that:
html.no-touch .main-menu li.menu
{
display: none;
}
should always take precedence, but clearly doesn't and somehow this appears to have been accomplished solely with CSS and I'm curious to know how.
A graphic illustrating this is here.
They are using css #media queries to show and hide different elements at different resolutions.
Mashable.com uses Skeleton which is a very good resposive website design framework. It has well defined #media queries to hide or display divs depending on viewport size.
Related
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
I have a bootstrap component nav-tabs and it works normally when the page width is larger than needed for the line (bootstrap .row div).
The problem is that when I change the view for mobile devices, responsive design is not behaving as it should and the tabs are misaligned.
See the code in the link below, the extent to which the page width is decreased, the Company, Support and Design tabs are behaving strangely.
http://www.bootply.com/Ym1iDjaBjz#
That's normal because there is not enough space for all tabs.
You could reduce padding at .nav-tabs li a to create space or add the folowing rule to make them display in 100% width.
.nav-tabs > li, .nav-tabs li a { display: inline-block; width: 100%; }
.nav-tabs li a { border: 1px solid #ddd; }
Good Luck!
I've used the bootstrap-tabcollapase library in similar situations: https://github.com/flatlogic/bootstrap-tabcollapse
It's a third-party bootstrap add-on that converts tabs into accordion panels at small media query widths.
I have designed a navbar for my website; you can see it at http://jsfiddle.net/ToddStyles/D2tZH/.
What CSS I would use to change the spacing between them? I used an unordered list to make it and changed the display to inline.
When you are displaying elements inline, HTML will parse any whitespace as a spacebar character. So, you can either comment out the space between list items, i.e.:
<li>...</li><!--
--><li>...</li>
Or, display them as block level elements and float them:
ul {
overflow: hidden; /* To prevent collapse */
}
ul li {
display: block;
float: left;
}
With regards to the Fiddle you have posted, you have used the <img> tag incorrectly. It is self-closing, and it should not be used to nest anything.
p/s: And please, don't use link shortener just because SO prevents you from posting a Fiddle link due to a lack of code. The rule is there for a reason — providing us code gives your question context.
If you’re looking to increase the width, you can apply a left margin to consecutive <li>s easily:
#navbar li + li {
margin-left: 0.2em;
}
Here’s your fiddle back. I fixed it to use inline-block to make the layout break less when it inevitably wraps on a smaller screen. And do take into account that we can’t see images on your computer across the internet.
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
I made a css-only dropdown menu. The requirement was to have a horizontal bar of items that can each drop down a vertical menu. Furthermore, those items should not drop a tertiary menu, but instead just show bulleted lists. My html has three nested ul and the menu is working perfectly in all modern browsers. It looks like this:
However, I did not like how the darker box behind the link is starting right of the bullet and does not stretch over the whole menu width, so I played around a bit and finally came to this tweak:
#nav li ul li ul li a {
padding-left:1.8em;
margin-left:-1.8em;
}
Now the bulleted menu item looks just like I wanted:
And due to the nature of em beeing relative to the font size, it works independently of the font size, like shown with a larger font size here:
I tested this on Internet Explorer 8+9+10(developer preview), Firefox 3+7, latest Chrome, Opera and Safari and it works like a charm.
However, I just dont understand why it is exactly 1.8em that does the job. How come every browser indents the bullet items exactly this far? I searched the internet on this topic, but I did not find anything helpful. Can I be sure this works on future browsers? Are those 1.8em specified in the HTML standard?
Thanks in advance for any hint!
Edit:
To DisgruntledGoat's answer: It would not work if I used 1em/-1em or 20px/-20px. With this style:
#nav li ul li ul li a {
padding-left:20px;
margin-left:-20px;
}
I get this (obviously not scaling with the font size) result for different font sizes:
Similarly, 1em/-1em is also off and looks like on the right in the picture above but scaling with the font size. It still looks like 1.8em is the magic distance for some reason...
Given your code, you've set up your ul such that it has no margin or padding. However, you've set up your li's such that they have margin-left: 1.8em:
#nav li ul li ul li {
display: list-item;
margin-left:1.8em;
list-style:disc outside none;
}
#nav li ul li ul li {
margin-left: 1.8em;
padding-left: 0;
}
And there it is.
You should definitely do a CSS reset and then set the properties the way you need them. Never trust browsers to be consistent. It adds a bit of coding but at the same time future proofs your code.
Based on many years of inconsistent browsers - I'd say you can't trust them to ever be consistent. The best option is to forcibly control it yourself.
You can use that by simultaneously setting the padding-left and margin-left of an li. eg:
li {
margin-left: 1.8em;
padding-left: 0;
}
Apparently some (mainly older) browsers use padding and some margin - so be sure to set both.
To answer the question and your comment: your solution works because you negate the padding with the exact same size margin. But the spacing to the left of the list is larger with the larger font size. You would get the same result with 1em padding and -1em margin or 20px and -20px.
As I mentioned in the comment, the actual default padding for lists is 40px. To make things even more confusing, on checking the user agent stylesheets (in Chrome Dev Tool and Firebug for Firefox) they report unique CSS properties: -webkit-padding-start or -moz-padding-start respectively.
I assume that these special properties are used in place of regular padding due to lists being a special case in HTML - they have hanging bullets/numbers that don't count in the padding.