sorry for the title...but I have an issue with the alignment of the main menu when the website come from responsive to pc view. (for example it happen when you rotate your tablet from portrait to landscape, or simply you enlarge your browser window from 600pixel wide to 1300px... ).
To understand what I mean just do this (just look at the main menu):
open my website: http://www.piedicosta.com/joomla3/en
reduce browser windows at 500/600 pixel wide, to let the css transform the website in responsive.
open a submenu by clicking on the down arrow at right. Leave the sub menu open.
now enlarge the browser window to let the css transform the website in pc view.
Can you see that the main menu, now float at left?
If you refresh the page, than the main menu comes at center.
This issue happen only if you leave (from responsive view) a submenu item open. If you don't touch the menu in responsive view nothing happen and everything seems working fine.
Is there a simple reason of this issue?
Thank you for your help!
Your problem lies in your responsive.css?reload file.
On line 25:
#tm:checked + .main-menu {
/*display: inline-block;*/
display: block;<-- this guy is the problem-->
}
Change it to:
#tm:checked + .main-menu {
display: inline-block;
}
You can fix for your next problem via CSS media queries. Now to be honest I am not sure which file you should edit, i think it should be responsive.css?reload. Note: Add CSS media code after
#media (min-width: 1024px) {
ul.main-menu li a {
padding: 27px 10px 10px;
}
}
#media (min-width: 1300px) {
ul.main-menu li a {
padding: 13px 17px 10px;
}
}
/*Add code below HERE!!*/
Copy all the code below to your file:
/*
* - Mobile
*----------------------------------------------------------------------------
*/
#media only screen and (max-width: 800px) {/* Serve big tablet layout and tablet menu kindle's and hi-res devices ( portrait ) */
#tm:checked + .main-menu {
display: inline-block;
min-width: 100%;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
left: 0;
position: absolute;
top: 0;
}
}
#media only screen and (max-width: 768px) {/* Tablets layout*/
#tm:checked + .main-menu {
display: inline-block;
min-width: 100%;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
left: 0;
position: absolute;
top: 0;
}
}
#media only screen and (max-width: 400px) {/* Small mobile devices */
#tm:checked + .main-menu {
display: inline-block;
min-width: 100%;
}
#toggle-menu .drop-icon, #menu li label.drop-icon {
left: 0;
position: absolute;
top: 0;
}
}
P.S. I think that your current menu configuration can't support what are you asking (didnt't figure out how to make your text align to left without messing something up, but maybe I am wrong) i did however make your arrow dropdown shifted to the right.
Related
I am building a website for my church,
https://new.churchindenver.org/
and I have a mobile "Menu" button that opens the mobile menu, and a "Close" button that closes it.
Both have the following CSS:
display: inline;
position: absolute;
top:10px;
right: 10px;
I want the menu button to be in absolute position
top:10px;
right: 10px;
When the screen width is 601-895px it works fine. When the screen width is <=600px, the css is being ignored and the "Menu" button jumps down about 50px. (and the logo jumps down too, incidentally, though not as far) Does anyone have any idea why?
Thanks!
Whether ! important or not, and no matter what I put there, the menu button (and the logo) are in absolute position, but apparently not to their parent element.
UPDATE:
Based on Elraphty's suggestion, I made the following hack, which seems to fix it. I'm still not sure what's going on, but at least it looks right. I put:
#media (max-width: 600px) {
#menu {
top: -41px ! important;
}
#logo {
top: -10px ! important;
}
}
and now the menu button and logo are in their proper position at top 10px.
The error is caused by
top:10px;
right: 10px;
Since they both have absolute positions, the solution write a media query than changes the top and right values when the screen is lesser than 600px e.g
#media screen and (max-width: 600px) {
. class {
top: 5px ! important;
right: 5px ! important;
}
}
You can also do this
.nav {
position: relative
}
.navItems {
display: inline;
position: absolute;
top:10px;
right: 10px;
}
So the items are positioned absolute in the nav element not the body element
Or use flex
.nav {
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
}
The div in question is:
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 200px;
background-color: white;
}
What I want is:
#media screen and (max-width: 720px){
.fixed { display: none; }
}
However apparently that's not how fixed containers work?
So how can I hide a "sticky" container when the screen gets resized to something too small to display both the container and the main content and thus making the container overlap the content?
Your css code seems to be working fine, perhaps there is a rule that has more importance/weight than the one in your media query, add !importat and see if it works:
#media screen and (max-width: 720px){
.fixed { display: none !important; }
}
JS FIDDLE
This is my page, when you make the browser width less than 960 px
The first gird box will be diappeared on Firefox,
But it still shows on Chrome.
How to make it has the same behavior on both Chrome and Firefox
Css
.container {
.categorysection {
margin: 0 auto;
max-width:960px;
&.grey {
background: #eee;
}
}
.grid-col {
text-align: center;
display: block;
float: left;
margin: 8px 6px;
}
}
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
}
}
The problem is that page title that says "finance". That title is floating left, and pushing the first block off screen.
You can either remove the floating from it, or clear the floating flow from the columns:
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
clear: both;
}
}
Looks like the float:left on the header (.container h3.heading) is breaking it. Remove it and it will work but you'll have to add a "row" class on the h3.
I am looking to target my Jobspark logo while viewed on a mobile device. Currently it scrolls down the page and I would like to disable that and place it at top of the page and to the right hand side of the "Menu". This way I could delete the + symbol and it would fit nicely. Below is some code I tried to use to accomplish this. www.jobspark.ca
#media only screen and (max-width: 640px) {
#header #logo h1.site-title {
text-align: left !important;
float: right;
position: absolute;
top: 0;
right: 0;
}
}
Thanks for the help.
******************Update***********************
- Logo hides behind the top navigation while in mobile
- Would like navigation color to be black while in mobile
- Menu text then needs to be white
Here is an mock up of what I would like to accomplish
try this in site.css
#header #logo h1.site-title
{
text-align: left !important;
top: 0;
right: 0;
}
Change max-width to 38% for .primary-nav .nav in site.css
max-width: 38%;
Hope this solves your problem.
I'm trying to get the menu bar of an example on the tb website to be a constant height throughout and I ran into a bit of odd behavior.
In the following demo:
http://twitter.github.com/bootstrap/examples/fluid.html
If you resize your browser to about 1070/1080 px width, the bar jumps to an ugly height and then back down. It's as if there's a media query somewhere in the responsive css that hasn't accounted for a ~2px range in browser width. I'm using this as a baseline for my application and would absolutely appreciate any suggestions on how to get this fixed.
The issue comes from some page specific style (from fluid.html):
#media (max-width: 980px) {
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
vs some external CSS (from bootstrap-responsive.css):
#media (max-width: 979px) {
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
}
As you can see, there is a 1px difference between those media-queries. If you were to edit the first to also use 979px, things would not jump any more.
There's a spot in there where .navbar-text.pull-right goes to {float: none} before .nav-collapse goes to {height: 0}. I'd look for that.
UPDATE: It's in the page styles:
#media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}