I have a navbar that looks pretty good on pc.
Unfortunately I have a problem with navigation when working on mobile devices. The navigation has a submenu containing two subitems ( language to choose ). If I use the website on the pc ( big displays ), then the submenu is displayed correctly. However, when I look at the mobile device, I only see the drop-down menu item "Language" but not the submenu that should open when I click on it.
Now I want to do two things.
When I open the navigation, the size of the submenu should cover the whole display. Thats easy with "height: 100 vh".
secondly ( the most important ), the subitems in the dropdown should generally be displayed. But I couln't make it at all.
Here is the webpage:
// removed because solved
You have to follow the following styles it will solve your problem
you have to remove the max-height that you defined which is max-height: 200px
#media only screen and (max-width: 767px)
ul#nav {
max-height: inherit;
}
and also you have to remove display:none from
#media only screen and (max-width: 767px)
ul#nav li ul {
/* display: none; */
}
because the collapse won't work if you left the display:none;
Related
On the website https://weightlosspillsreviews.com I have a problem when displaying on tablet devices at 991px or less in viewport width. The problem is that the menu items get line breaks at that viewport breakpoint and I want to switch to the hamburger menu at that breakpoint.
When I tried overriding bootstrap.css, which has its breakpoint set to 767px, by putting the associated media queries into my style.css file and setting them to 991px, the whole top nav menu disappears rather than switching to the hamburger menu.
Here are the styles I put into style.css and adjusted:
#media (max-width: 991px) {
.hidden-xs {
display: none!important;
}
.navbar .navbar-inverse .visible-xs {
display: block!important;
}
}
But when that code is present, the whole menu disappears.
What am I missing here?
In your case, the website uses bootstrap 3.3.7. In later versions of bootstrap, this can be simply updated just by a class. You can go down that path of updating the bootstrap version if you want.
A quicker solution would be downloading a customized bootstrap style. Go to this link to customize your CSS: https://getbootstrap.com/docs/3.4/customize/
In the Grid System section update #grid-float-breakpoint to the width you want that navbar to collapse.
I built this very simple site for work and I found an issue related to the top navigation bar when resizing on mobile (please note there is no mobile version of the site, nor will be).
When resizing on mobile screens, the navigation bar remains fixed, while the content can be moved. This means that, while the navigation bar stays stuck at the top left corner and partially blocks the screen, the text moves freely under it. Please refer to the screenshots below:
Mobile: Example 1
If you check the source code, the top navigation bar is set to fixed. If I remove this line, resizing on mobile works fine, but the top margin specified for the content (so that it doesn't overlap with the navigation bar) becomes huge.
Changing this margin, however, affects the navigation bar when resizing the window on a computer, as you can see below:
Desktop: Example 1
It's been many years since I last worked with html and css, so please excuse me if I'm missing the obvious.
How can I find a solution to this?
This is happening because you given width and max-width 100% to your top class, If you want to fix this in mobile devices you need to write media query
Try below code to your css
#media (max-width: 500px){
div.top{
width: auto;
max-width: none;
}}
if you want to show navigation in mobile view then use below code.
#media (max-width: 500px){
div.top{
position: relative;
}
div.normal{
margin-top:200px;
}
ul.menu li{
float: none;
}}
My website is http://www.brightlegal.co.uk. I was having issues making my main menu properly mobile responsive, so I instead opted to install a mobile reponsive menu plugin (I'm using Wordpress). I tried to hide the main menu on mobile devices using this css:
#media screen and (max-width: 768px){
#main-nav-wrap {
display: none;
}
However, on some of my pages I have "sub menus" to the left. For example, here: http://brightlegal.co.uk/individuals/family/ and with that css implemented it also removes these menus on mobile devices. How can I stop this from happening?
Thanks,
Becky
.ui.nav {
display: inline-block !important;
}
For left menu .tb-column-inner #menu-391-1-0-1 { display:block }
Interested in what other people have done to make Zurb Foundation 5 top bar working without JavaScript and in mobile viewpoint i.e #media only screen and (max-width: 40em) { }
On our site we are using .no-js and media queries, our css looks like this:
#media only screen and (max-width: 40em) {
/* Fix menu height */
.no-js .top-bar {
height:auto;
}
/* Add menu text */
.no-js .toggle-topbar.menu-icon::after {
color:white;
content:"Menu";
line-height:30px;
}
/* Remove menu link*/
.no-js .top-bar .toggle-topbar.menu-icon a {
display:none;
}
}
This works pretty well, but I'm concerned about the design of the menu when we start introducing new menus and especially nested menus, obviously we could expand nested menus again, but on mobile you would be endlessly scrolling down.
So, this brings me to the question... How would you make the top bar work without JavaScript but still working with nested menus without expanding them until the parent is clicked, but bare in mind that the parents may be visit-able pages, this is the main issue.
On mobile (or scroll the browser to 320px) I'm getting a horizontal scroll, this appears to be assioated with the navigation on mobile as it disappears when the nav is collapsed. Does anybody have any idea what this issue may be?
The live link to my portfolio where the issue is located here
As you said, it's related to your navigation.
You have CSS that specifies a width of 100% (which you then offset, causing the overflow).
If you update your media query and specifically this line:
#media only screen and (max-width: 767px)
.nav-collapse, .nav-collapse ul {
width: 100%;
}
}
From 100% to say 90% (just a magic number, which worked for me - you'll probably want to add a new rule that targets mobile devices) and then test, you'll see it removes the overflow on mobile devices.
Use 1.000em value instead of 320pxl