Mobile navigation bar disappears on desktop - javascript

I am trying to make a sidebar navigation that is static on desktop and collapsed on mobile devices. The problem is that when I press the toggle button on mobile, the navbar stays toggled and is not visible on desktop. Here is my code below:
HTML
<div class="d-flex" id="wrapper">
<div class="bg-light" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="heading-img" src="./images/logo.png"></div>
<div class="list-group list-group-flush nav-group nav-items">
<img class="nav-img" src="./images/home.svg">Home
<img class="nav-img" src="./images/settings.svg">Settings
<img class="nav-img" src="./images/exit.svg">Exit
</div>
</div>
CSS
#menu-toggle{
display: none;
}
#media (max-width: 768px){
#menu-toggle{
display: unset;
}
}
JS
<script>
$("#menu-toggle").click(function(e) {
$("#wrapper").toggleClass("toggled");
});
</script>
Is there a way to detect that it's resized and remove the "toggled" text

i've experienced such issue in the past and i solved it by just adding an !important attribute to the css styling for tablets and desktop mode
for example
#media only screen and (min-width: 750px){
#navigation{
display: initial !important;
}
}
the !important attributes makes the navigation always visible on desktop mode even after toggling the button in mobile mode.
A question similar to this has been asked in the past, you can check out the link below
link to the question

Related

Append <li> inside a div

I have created this nav with a div who has those li inside
<nav>
<div class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
</div>
</nav>
Also, I have created a "burger" div that functions as a button, when someone is on phone, and whenever you click on it, it shows Αρχική,Προϊόντα,Φωτογραφίες.
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
However whenever someone is on phone and clicks on it I want to have one more li called "Google Maps".
Is there anyway I can do this using Javascript?
The simplest way of achieving this is via CSS - having a media query that shows the Google maps link only at mobiles screen size . The following media query will hide the li with the maps-link class for any screen size 768px and up.
You can see this in action here by viewing the snippet below (equivalent to small screen in which you will see the maps link since the width is not wide enough to match the media query.... then clicking the "full-screen" link to toggle to full screen and now the maps link will not show - because the width is wide enough totrigger the media query.
Also note that li's are children of a ul element - not a div.
And that rather than creating two seaprate nav lists - one for phone and one for not-phone... it is better to have a single list and style it accordingly for different viewports.
#media only screen and (min-width: 768px) {
.maps-link {
display: none;
}
}
<nav>
<ul class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
<li class="maps-link">Google maps</li>
</ul>
</nav>

How to prevent a navbar from overlapping other elements

I'm working on building a website, and I have an issue where the navbar is hiding the first bit of the page so I can't see the information. How would I fix this? The link to my website is here:
codepen.io/sookyungahn/pen/wzQkBp?editors=1100
In your case, add padding-top in home div id with same size height on your nav bar.
<div class="container-fluid well" id="home" style="display:block; padding-top:50px;">
Add a padding of the size of your navbar's height to the body.
In the official bootstrap example here, they add a 70px padding on top. Basically,
body {
padding-top: 70px;
}
Since 2017 add position: sticky; top:0; to navbar and it will fix this problem.
<img style="margin-right:10px;margin-top:50px" class="image gap img-rounded pull-left" src="http://odezhda-stilnaya.ru/kartinki/1/ptichka_babochki_zvezdy_2560x1600.jpg" alt="PLACEHOLDER IMAGE" />
<div>
<h3 style="font-family:HelveticaNeue, Tahoma; font-weight:200;margin-top:50px;">I am a website developer, passionate about programming and assisting people. I am currently an intern at a tech startup.
</h3>
Great Code:)
Just add margin-top:50px as shown.
Happy Coding :)

To know the accurate key breakpoint in bootstrap grid system

I am using bootstrap for my home page layout. I have got one column of 9 units for my content and one 3 units column for my sidebar. The div inside the sidebar is position:fixed. For smaller screens bootstrap send my side bar to the bottom, that is ok. However, at that moment I need my sidebar position relative.
I am using JavaScript to check the width of the screen to change the position property, but I am guessing that bootstrap is going to send my sidebar to the bottom when the screen is lesser than 972px. How can I really know the accurate width which bootstrap will send my sidebar to the bottom? Appreciate any help? Thanks. Other approaches are welcome.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div class="content"></div>
</div>
<div class="col-md-3">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
The script:
$(document).ready(function () {
if ($(window).width() > 972) {
$('.sidebar').css('position', 'fixed');
}
});
On the Bootstrap front page it has the info for this.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
There is also the xs which is < 768px.
To get full control use all lg, md, sm and xs, and set what you want for each device/screen size.
Just using one like lg will allow things to change when resized.
Adding a Fiddle to help re your second question.
I have set up a full screen Fiddle for you, resize the window and see how the two areas stay side by side when you resize.
That is controlling it as you want I think.
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-success block">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block">
</div>
Added
Hit F12
The bootstrap breakpoint you are using is md (Medium devices).
So when the screen width is >= 992px it will be side-by-side with your main content div. When it is <= 991px it will drop below.
http://getbootstrap.com/css/#grid

How can I stop a bouncing responsive page with mixed-height, one or two-column, Bootstrap Carousel items?

I have a simple Bootstrap Carousel at the top of a long page. Items on the carousel are a mix of text and images and consequently are not always the same height.
This leads to a bouncing page below the carousel. Can you help me figure out a way to keep the responsive layout and stop the bouncing text? I'm getting sea sick!
The solution needs to solve the following:
Stop bouncing text below the carousel
Continue to allow the 2-column carousel items to be collapsed into 1-column when the responsive page is below a certain width (this means that the height of the carousel may very well double when viewed in a narrow window in one column)
Fiddle: http://jsfiddle.net/PmZnh/1/
<h1>This is my carousel site</h1>
<hr>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<h2>List One</h2>
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
</div>
<div class="item">
<h2>List Two</h2>
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>
<div class="item">
<h2>List Three</h2>
<ul><li>Item 1 is longer this time. Way longer than the first time. It just keeps going and going and going.</li><li>Item 2</li><li>Item 3</li><li>Getting sea sick yet?</li></ul>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<hr>
<p>The rest of the text on the site shouldn't bounce and should be responsive-friendly!</p>
<p>1. the .items are flexible height (but usually within 10-20px)<br>
2. when the page width is below 760px the list shrinks from two columns to one column, meaning the height may now be twice as tall as before.</p>
You should set a min-heightto the carousel div:
#myCarousel{
min-height: 180px;
}
If you have now problems, with the fact that the height of the div might be to high on certain viewports ajust them manually:
/* Large desktop */
#media (min-width: 1200px) {
#myCarousel{
min-height: 130px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
#myCarousel{
min-height: 140px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
#myCarousel{
min-height: 180px;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
#myCarousel{
min-height: 200px;
}
}

Bootstrap:Fixed nav-static-top on top but scrollable nav-collapse

I am using bootstrap to design my site.
Base on this fiddle
I made the nav-static-top to fixed on top. Now the nav-collapse has to many contents and i can't browse to the last menu because the nav-static-top is fixed on top. Is there a way that the
nav-static-top is fixed on top and the nav-collapse content is scrollable so i can scroll to choose on the content?
i've than something like this but i doesn't look good
and i think android devices don't support overflow:scroll
Found a better way. Tested on iphone 4 only.
#media (max-width: 767px) {
.body-container {
padding-top: 50px;
margin-left:10px;
margin-right:10px;
}
.navbar-static-top{
position:fixed;
width:100%;
z-index:1000;
}
.navbar-responsive-collapse{
max-height: 350px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
This doesn't completely fix your problem, but it definitely looks better if you do this:
<div class="nav-collapse collapse navbar-responsive-collapse" style="overflow-y: scroll;max-height:400px">
<ul class="nav">
instead of
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav" style="overflow: scroll;max-height:400px">
I don't know about doing it on Android, but if it really doesn't work this way, you'll probably have write some JS or something.

Categories

Resources