I want to fix my menu bar.
My menu bar is sticky now. Even a mobile device(like iphone, ipad...) I would like to fix my menu bar not sticky in mobile device.
PC (bigger than ipad) - Sticky menu bar
Mobile (ipad, iphone, etc) - not sticky menu bar
Please use css.
Thank you, have a nice day!
Media Query is your friend if you want to change styles for different devices.
Here are some documents:
MDN - CSS media queries
W3C - Media Queries
Bootstrap is a good example to see how to use media query.
Bootstrap - Responsive utilities - see how it works
Github - bootstrap/less/responsive-utilities.less - source
Related
So I made a website which has two CSS files; one is for regular desktop computers, and one is for mobile devices with a max width of 480px. Something happened while I was editing my website, and now the mobile version is the only CSS that shows.
I have two CSS' linked in my header, both the mobile CSS and regular (desktop) CSS. When I remove the mobile css link, the desktop version of the website shows like it should. However, when the mobile css stylesheet link is in place, only the mobile website is what shows on both desktop and mobile devices.
When you go onto my website on a laptop, the whole page is shoved to the left, and it is only 480px wide. Any idea what is up?
I figured it out. There was a wordpress plugin called "Above the Fold" which was the problem. I had to link the CSS in the footer.
Is there a way to target css to the mobile menu only? I am using http://athemes.com/theme/Sydney and my dev server is at http://150.101.201.63/wordpress2/WordPress/
Simply put when the menu changes to the mobile menu (one with single button to open menu versus top navigation menu) I want to add some styling. I used to do this by device width but I'm finding this less effective with this theme.
Any help appreciated.
Resize your desktop window to actuate the mobile display of your site and use a web inspector tool in your browser to find the element you'd like to change.
Your Dev site is broken, but Renovation Princess uses the element #respo-menu-list-left to effect portions of your mobile menu.
I tried/guessed it and the url is http://150.101.201.63/wordpress2/wordpress/, so now uppercase in wordpress.
I looked in over the website and when it displays the mobile menu it changes the menu id to mainnav-mobi, so you can safely write you css for that id and it will only show on mobile.
#mainnav-mobi {
/* css here */
}
Just a quick question from a colleague of mine, I have made his website responsive and at 800px the navigation gets hidden and the mobile menu appears using the standard CSS media query.
Viewing the website on an iPad, it is displaying the mobile menu but my colleague thinks that the iPad should display the website as it is on desktop as it has a screen resolution wider than 800px.
Is this correct and if not, why not?
Thanks.
An iPad's width in portrait is 768px. Check out viewport sizes. Things get a bit more difficult to understand with higher resolution displays. There's already a question posted about that here at Stack Overflow.
I have a site that I am working on at http://wpmend.com. The site looks ok on desktop but on Mobile well, I think my custom CSS has messed it up. You'll see that the text and button on the homepage section don't look right, and in the Request a Job section, the buttons for the first two job types don't show up at all.
I have searched this site and found similar issues and fixes but none that have addressed my exact problem. Please advise on how I can fix the look on the mobile site. By the way, it's a Wordpress site using the Rapid theme.
Thanks in advance!
Scott.
Maybe you're good working with a media query for CSS3.
Add this code to your CSS for the page, where #container is the object that wraps the button at the top.
#media screen and (max-device-width:480px){
#container: margin-top:15px;
}
This will implement this CSS code when the device width is smaller than 480px. It'll move your container below your header down a little bit.
Note: not all mobile devices are smaller than 480px, you'll have to implement multiple media queries for specific devices. Refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Youtube full screen shows under the Wordpress layout elements like menu and footer (Google Chrome browser only).
How can i fix this?