I am having an issue on a mobile version of a website where the dropdown menu doesn't appear completely in view because of the position of the particular menu item and the amount of items in the dropdown
The image below is how i would like it to appear, so it would focus the area when the parent is clicked.
Would it be possible to have it so the menu scrolls down to show all the sub items when clicked ?
You can view website at http://www.ndb.ie/2016/. It's using the standard Bootstrap menu code.
You should override bootstrap style.
.navbar-collapse.in {
overflow-y: visible!important;
}
Put this CSS in your style.css file
For Center Menu in Responsive
#media only screen and (max-width: 767px) {
.nav-justified > .dropdown .dropdown-menu {
left: 50% !important;
margin-left: -80px; /* (Half Menu Width in margin left) */
top: 100%;
}
}
For removing Scroll in Responsive
.navbar-collapse.in {
overflow-y: visible !important;
}
Related
I am trying to make Advance search bar. I am using this template https://bootsnipp.com/snippets/2q81r.Everything is working fine only problem is, Search bar and dropdown menu is not full width 100%.I want dropdown menu cover full width of search bar and must be responsible.
In this template width of search bar and dropdown is fixed in pixel.
Only delete or comment the width property
#media screen and (min-width: 768px) {
#adv-search {
/* width: 500px; */
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
/* min-width: 500px; */
}
}
Instead of having something like:
searchbar{width: 500px}
Try using max-with to make it responsive:
searchbar{max-width:100%}
For the dropdown menu add:
.dropdown.dropdown-lg .dropdown-menu {
width: 100%;
//rest of code}
I'm having an issue with my sites mobile navigation bar being scrolled past the view-able area when the browsers navigation bar is showing. I've tried a few things to fix it, however I cannot seem to get it working properly.
Before scroll down:
After scroll down:
Excerpt of my SCSS relating to the nav bar:
nav {
display: flex;
flex-direction: column;
float: left;
background-color: #3a3e4b;
height: 100%;
width: 100px;
position: fixed;
}
// body also switches flex direction to put the nav bar at the bottom.
#media only screen and (max-width: 720px) {
nav {
flex-direction: row;
height: 70px;
width: 100%;
}
}
Full SCSS available here: https://github.com/CorruptComputer/CorruptComputer.GitHub.io/blob/master/assets/css/main.scss
I looked through these but neither of them seemed to help:
Issue when resizing top navigation bar on mobile
How to create a sticky navigation bar that becomes fixed to the top after scrolling
This is an issue related to google chrome, that you will have to find a work around for.
When the chrome mobile top address bar appears, it pushes the page downwards and because of that you get this issue.
By scrolling the page, the top address bar will disappear.
Try this Javascript code, you can use it as a function or just as a single line on top of your Javascript file.
scrollOnLoad();
function scrollOnLoad() {
window.scrollBy(0, 1);
}
Or
window.scrollBy(0, 1);
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;
I am super new to Bootstrap so please forgive me if I am just not getting it.
This is more of a design decision question than a technical question but I noticed in the bootstrap dashboard examples Bootstrap 4 dashboard example on a small device there is no way to navigate through the application as the left menu completely collapses and there is no + to expand the navbar. On the 3.3 version here: Bootstrap 3.3 dashboard example when the device is very small there is at least a + that allows you to expand the top navbar but still all of the options on the vertical menu on the left are completely lost.
Without the menu on the left it seems to me that the application would be unusable. Am I missing something?
Default sidebar display in Bootstrap example is hidden display: none;
And for screen width > 768 px #media (min-width: 768px) {} they show this block.
You can do it yourself..
Here is original Bootstrap code:
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
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.