Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm using a mobile first approach to create a responsive website. I'm currently working on my navigation menu and I'm satisfied with it on mobile (though it's far from perfect). However, when styling my navigation menu for web use I'm not able to position my dropdown content below the element in my menu. It's currently popping up in the upper left corner.
I'm using jQuery to create my clickable menu (don't know if that's relevant).
I also experience a bug on mobile where i cannot close the dropdown after opening it again. If anyone has an answer for that too, that would be great but I'm satisfied with it for now.
Any help is greatly appreciated, thank you :)
Not a perfect example, but you are best off removing your use of floating and replacing with a display led approach.
Something along these lines:
#media only screen and (min-width: 900px) {
nav > a, .dropNav, nav > div {
display: inline;
position: relative;
}
.dropList {
left: 0;
right: 0;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding-left: 0;
}
}
Example: https://jsfiddle.net/davcpas123/mjukghz6/1/
This will achieve something similar to this:
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working on a theme which has a dynamic menu when we scroll it goes hide. I want to fix it on the top just like w3school website. Any idea?
Is it a good option to use a plugin like Sticky menu
Here is the website link
https://spaceunlimited.in/
CSS
.ehf-header #masthead {
z-index: 30;
position: relative;
}
When using the following for masthead you can keep the brown borders on the side.
#masthead {
z-index: 30;
position: fixed;
background: whitesmoke;
top: 0;
left: 20px;
max-width: calc(100% - 40px);
}
Add this css
.ehf-header .headroom--unpinned{
position:fixed !important;
top:0px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm creating a "sketchpad" mini-project. Most features are working so far, but I'm having one issue. The sketchpad uses a 16x16 grid by default. When I fill in the bottom row of the grid, you can still see a tiny white line. I have no idea where it could be coming from.
This is an image of the issue I mentioned above
Here is the code: JSFIDDLE
#grid {
height: 450px;
width: 450px;
margin: 10px auto;
background-color: #fff;
display: block;
overflow: hidden;
font-size: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I don't want a width-scrolling bar on my website and wanted to know if you know whats causing it and how to fix it(code).
I already tried this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Your div row bg-about have css margin-right: -15px just wrap the row bg-about in another div .container-fluid and everthing will works fine.
Tip.
You shoul always wrap row inside container, container-fluid or col-*-*
The reason is this rule in your CSS:
.row {
margin-right: -15px;
margin-left: -15px;
}
It adds 30px the 100% width of .row
remove it...
Your div with class row bg-about has a margin-right of -15px which causes your page to be larger than 100%.
Just remove the row class from this div and the problem should disappear.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hi im looking for a way so that if my mouse moves to the far left or right of the screen an action will be performed is there a way to do this with html css jquery etc? Like im trying to get my navbar to show when my mouse is reaches the left end of the screen. any help would be much appreciated
See here http://api.jquery.com/mousemove/
Based on the examples, you can then use pageX and pageY to determine position of the mouse. You could probably have something like this:
$("body").on("mousemove",function(event) {
if (event.pageX < 50) {
// do something
}
});
No need to make it overly complicated. Just position your menu as a transparent layer, key hover to expand and show the menu links.
#menu { overflow: hidden;
background-color: transparent;
width: 20px;
height: 100%;
position: absolute; top: 0px; left: 0px; }
#menu:hover { width: auto; background-color: red; height: 100% }
.link { margin-left: 20px; display: block; }
<div id="menu">
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
</div>
Here is a fiddle showing how it will work. http://jsfiddle.net/6cgZZ/
If you want to lock the menu in place, then you will probably want to use JS to trigger a mouseover event, but I would still use a transparent element to use as a trigger. In that case, using DOM you can dynamicly alter the menu's properties, like visibility, width, etc.