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.
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 design I'm working on (apart from the desktop version) has been thinking for a 480px x 720px resolution, but it suppose to show ok on smaller devices. I'm having a lot of problems with the elements on it, they are all overlapping.
This is how it should look like
And this is how it looks on a smaller resolution
My main concern right now is with the overlapping elements, I know I may need to adjust some other things using media queries, but I don't want to continue until I fix this:
correctly position the menu (as it moves and finally disappear).
Show the full masked image.
Prevent buttons (images) from overlapping.
Prevent text from leaving div.
As I believe that I have a very confusing mix/absence of position and display elements on my css.
Relevant code:
#media only screen and (max-width: 500px) {
/*for the menu*/
.site-header {
display: block !important;
}
.sidebar-toggle { //the menu bar-icon properly
right: 390px !important; // I needed to do this because it was originally on the right side (im working on the Magnus theme in wordpress)
display: table;
position: absolute;
float:left;
}
/*for showing the masked image*/
.content-area { //the div that contains the "A" masking the image
overflow: hidden; //without this scroll appears
}
h1.masking-a {
display: block;
position: relative;
}
/*for the text and image buttons*/
.square-footer { //the container div
position: fixed;
}
.square-footer-text {
position: fixed;
}
.square-footer-text p {
position: relative;
text-align: center !important;
}
.square-footer img {
position: fixed;
}
}
I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
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.
I'm pretty new to css and I am working locally so I cannot provide the exact address, but here goes:
I am using the wpexplorer adapt theme which has a responsive layout. I set up the wrapper background in the style.css like so:
#wrap{
background: url(images/scribble-top.jpg) center top no-repeat #fff;
margin: 0 auto;
width: 1040px;
padding: 0 30px;
}
When I moved into responsive.css to start designing the other viewpoints I wanted to use a new background image for the wrap div in the tablet portrait view but for some reason the new image will now show up at all (just remains blank) and the style.css background appears again when I shrink it to the mobile viewports. Here is my coding:`
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 740px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {background: #000;}
#wrap {background: url(images/scribble-top-680.jpg) no-repeat center top #fff; width: 680px; overflow:inherit;}
.hp-highlight, .portfolio-item, .home-entry, #footer-one,#footer-two,#footer-three,#footer-four{ width: 155px; }
#home-tagline{ font-size: 21px; }
#search { text-indent: -9999px; }
.loop-entry-thumbnail{width: 35%;}
}
It should be noted that the new image is the exact width of the new wrap div size and that the height is not relative as it is just a banner-type image at the top of the wrapper thus should not interfere with wrap div height.
What am I doing wrong?
Thanks in advance for your help!!!
`
add !important after your background declaration like so:
#wrap {
background: url(images/scribble-top-680.jpg) no-repeat center top #fff !important;
width: 680px;
overflow:inherit;
}