I have a logo that takes you to startpage when you click it. This works in desktop view but not on mobile view!? What can I do to make this work also in mobile view?
I have a vue-project.
The homepage is located at eagleinstruments.se
Hope you can help med solve this!
Best regards / Lisa
It's because the menu navbar was overlapping on your logo. Your logo do have a z-index: -1; but here, the fix is to set some width to the .wrap .hamburger menu.
This could be enough, but of course you can make something more complex with flexbox or alike to make it more responsive depending of what can happen.
width: auto;
I found this out by inspecting with the chrome devtools.
Related
I cannot figure out, how to make mobile menu full-width. When I click on hamburger menu, it opens up, but it's only like regular dropdown.I tried many ways to change it, but can't figure it out.
Here is the link: https://dev.povoden.cz/
Add style position: static to class "et_pb_menu_inner_container" and "et_pb_column--with-menu"
You can use the following way.
.et_mobile_menu {
position: fixed; /* Instead of absolute */
top: 90px !important; /* Adjust it to set the top value */
}
So I am not sure which version and such you are using. Whilst divi does some great things in terms of making building easier. It means they often make it very difficult to find out why normal CSS doesn't seem to work.
I have a similar issue and I was using the theme builder to build a global header. None of the CSS I tried seemed to work.
I was unable to find where the width was being set and how to overwrite it.
The solution in the end was simple.
When in the theme builder.
New Section (fullwidth)
New Row (full width) - THIS is what actually fixes the problem
Please checkout the attached screen shot
how to adjust the menu
I'm using a Glyphicon inside of a div to open up the mobile menu called Mmenu on mobile devices. The action works fine, but the Glyphicon shows above the menu rather than hidden below it. I've changed the Mmenu's and Glyphicon's z-index to 100 and 99 respectively but still nothing.
I suspect it's related to another issue that's causing the page content to slide over but not the header where the div is contained?
Is anyone able to help me understand why?
Thanks.
website
Not sure why the problem is happening, but you can work around it with this CSS:
.mm-menu {
z-index: 200 !important;
}
This puts the fixed menu panel above the icon.
Updated FIDDLE
Using one of jquery plungin to display as Flyout styles menu.
Please check http://jsfiddle.net/bNj4R/
It's so strange in Safari browser, when you click a top level menu from fifth top, It does not showing any children menus.
I found It's something do with following css in jqueryUI.css
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
It's all working great in other browsers. expect safari.
Please check http://jsfiddle.net/bNj4R/
Fixed , Forced to make a scroll to top. before display sub menus.
$('.fg-menu.fg-menu-scroll').scrollTop('0');
Thanks for your advice :)
Looks like safari isn't scrolling the box to the top again. That's the reason why the first 5 work and the rest don't. Once you scroll, Safari keeps that position when it brings up the submenu.
I think it's possibly a bug with fgMenu library. Looking at the lirbary, it's 5 years old and it's pretty hefty in size. Might be worth having a hunt around for a more current menu library. Can do a bunch of things with css these days.
I have created a drupal theme, URL: http://sundancefoundation.org/
There is a small shift in the layout when we switch between home page and about us page.
This is working fine in firefox only, all other browsers are showing this shift.
I know this is a CSS issue, but not able to fix it.
Any help is appreciated.
Thanks.
The About us page is shorter than the screen height and therefor has no need for the scroll bar on the right hand side of the screen. The home page is longer and has a scroll bar. When the scroll bar appears or disappears it looks like the screen is shifting but that's all it is.
This css rule will simple fix the body width flickering issue:
body {
overflow-y: scroll;
}
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.