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 }
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 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;
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
I'm encountering a problem on a website I'm developing: when I re-size the window to an horizontal resolution lower than 1170px both the navbar and the footer create gaps to the right of the page.
This also happens on mobile browsers (when zooming in the navbar shifts to the right making the last objects unreachable).
Could you kindly help me fix this problem?
HTML: http://pastebin.com/nTW3MrEr
CSS: http://pastebin.com/v1TDiK6J
Footer problem (Window Resized, the hero unit/navbar/and content are fine, but the footer still glitches, i've put some text to better understand the problem:
The problem with the website is because of the min-width:1100px set to hero-unit and width:1170px set to div #corpo. Since you are using container class to wrap up your content , in bootstrap responsive css the width is already 1170px so no need to set it there .
Also to rearrange your layout to be properly visible you can write media queries for specific sections of your page.
On your page on tablet view there is a big top margin between navigation and page-header so you can arrange them as belows like:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.navbar-fixed-top{
margin-top:5px;
}
.page-header{
margin-top:5px;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.navbar-fixed-top{
margin-top:5px;
}
.page-header{
margin-top:5px;
}
}