I have a sticky menu set up so that on my desktop screen, the menu stays at the top no matter where the user is on the page. This works great on the computer, but not so great on a phone. My theme is a responsive theme so it adjusts to a phone screen pretty nicely, and the menu tab is condensed to a single drop down button on the phone. However, when you open the dropdown, all my menu bar tabs drop down into the first post content and are very hard to see and click on. I'm thinking this is because of the sticky menu that I set up.
I also have two ads set up outside my main content area. These overlap with the content area on a mobile phone. I need to keep these ads either pushed to the bottom of the content area, or hidden, on mobile view.
My site is www.beeandcompany.com. I would so appreciate if anyone would be able to help me out!
Well, just edit the responsive css you have in your style.css. There is a line
#media screen and (max-width: 779px)
That will work on all resolutions smaller than 779px. There target your menu, and position it fixed to top left corner.
For instance
nav.lowermedia_add_sticky {
position: fixed;
top: 0;
left: 0;
background: #aaa;
z-index: 100;
}
You can edit it to your liking. Also you should make your menu toggle always visible. And those ads are overlapping your content. You should get someone to go through your design and fix stuff for responsive.
Related
I managed to make this mobile menu fixed via the Sticky Menu (or Anything!) plugin but the secondary expand area and more specifically the widget-area is not scrollable thus not allowing you to see all the widgets.
I’ve tried overflow: scroll amongst other things on various properties but I’m drawing a blank.
I expect when you expand the menu the the widget-area would become visible and you can scroll to the bottom of the widget area but you cannot, it only scrolls to a select area then continues to scroll the site body in the background.
Website: atceg.net
I think this will help you:
Remove overflow-y: auto from .sidebar. And add below properties to #secondary.
#secondary {
height: calc(100vh - 106px);
overflow-y: auto;
}
I have shopify store on which i have header navigation bar. And i want this sticky header bar stick to the top when screen resized to mobile size. in my current situation sticky navigation bar is working on desktop view but when screen resizes then it disappears. I want this header bar stick to the top in this way
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header
Please tell me how to make it sticky on mobile size?
The code that is used on w3 schools works on mobile. What I believe is happening (Without a link to your shopify site I can't be 100% certain) is that your shopify theme has 2 different navigation bars and you're only applying the code to the desktop bar. Apply the code to the other header, since it is not being displayed adding the class to the hidden element should not cause any issues.
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
mobileheader.classList.add("sticky");
} else {
header.classList.remove("sticky");
mobileheader.classList.remove("sticky");
}
I am creating a menu bar with w3-css. The menu bar should be fixed to the top.
Here is an example, please try to decrease screen width:
https://www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX
The problem is, when screen width is set to narrow, and the menu wraps into more than one lines, it covers the first lines of text. Is there a way to solve it somehow?
You can solve this issue by using a media query. Media queries allow you to apply CSS to a site at a certain screen size. For example:
#media (max-width: 650px) {
.w3-container {
padding-top: 40px;
}
}
This CSS pushes the container down at smaller screen sizes so that the menu will never cover up the text below it. Alternatively you could use a media query to make the menu text smaller or hide certain parts of your menu when it gets to smaller sizes.
Most people switch to another form of menu for mobile devices such as a Hamburger menu. This isnt needed to fix the problem you are currently facing but you might want to look into it for your future projects.
Set .w3-top to position sticky instead of fixed. Then remove margin-top from the body.
https://www.w3schools.com/code/tryit.asp?filename=FOC96ENPLRNO
On this page: http://diablogym.net/
When you use a mobile device like a tablet or cell phone the logo covers the menu icon button. I want that icon to appear on the right - logo on the left. I can't figure out how to do that. Can anyone supply the css to fix that?
thanks!
The styles on this site seem very messy...
In order to fix it I removed the float, position, width and height from '.nicdark_logo' (why is the height set to 10px?). I also took the position: absolute; off of '.nicdark_logo img'. This makes the logo appear above the menu.
Beyond these changes, I would suggest centering the logo and scaling it down a bit so your sticky header isn't taking up so much of the page.
I am developing an e-commerce app for ipad both in landscape and portrait orientation. The main content div in the middle of the layout will have all the products displayed side by side. I have written media queries for both landscape and portrait. They are working fine, but I am getting a vertical scroll bar because of the content div (I think). I want to avoid the vertical scroll scroll bar completely.
top left: logo
next div: title
next div: products----I think the problem is with this div only.
nextdiv: footer
I can't send the picture because I have less than 10 reputations.
Can anybody help me with this issue?
You can try this
html{overflow-y: hidden;} if you want scrollbar disabled for your html.