Thank you for stopping by!
I would like to appeal to your wisdom in order to solve a problem that shouln't be that hard :(
I'm developing a website with a big collapsing menu (like a sitemap) that is pretty visual but useless in mobile views, so I created another menu for being showed in mobile and small screen devices.
Summarized code is like:
<nav class="navbar navbar-light bg-light ">
<div class="container-fluid ">
<a class="navbar-brand" href="index.php" id="btnLogo">
<img src="../images/logo.png" width="130" height="80" class="d-inline-block align-top" alt="logo">
</a>
<button class="navbar-toggler navbar-toggler-right float-right"
type="button"
data-toggle="collapse"
data-target="#desktopMenu"
aria-controls="desktopMenu"
aria-expanded="false">
<span>MENU</span>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu for Desktops -->
<div id="desktopMenu" class="collapse navbar-collapse">...</div>
<!-- Menu for small screens -->
<div id="mobileMenu" class="collapse navbar-collapse">...</div>
Question is: Is there any way to change on the fly "data-target" and "aria-controls" to change between "desktopMenu" and "mobileMenu" depending of the viewport width?
I don't know if this approach is the correct/better one. Please if I'm wrong do not hesitate to suggest another way to do it.
Thank you very much!
In your case there is two ways to adapt your page depending on the viewport. One way would be to use #media-queries and show/hide one or another element with the display attribute.
This will allow you to adjust your code depending on the screen-size.
#media only screen and (min-width: 1024px) and (max-width: 1024px) {
// in your case: hide an element, show the other
#desktopMenu { display:none;} // or display block etc
}
You can set up width or height as you want.
Here is more about media queries
You could also get the current viewport values as so:
// Size of browser viewport.
var width = window.innerWidth;
var height = window.innerHeight;
And then adjust your code depending on that :
if (height >= yourValue) { // or however you want to check the height
document.getElementById('button').setAttribute('data-target', '#desktopMenu'); // or however you want to add/change attributes
}
Hope that helps
Related
Good morning all,
I have this website I'm working on. It has several pages but, I want the menu to be STICKY once you scroll to it and it comes into view for the first time.
This is a template but, when you keep scrolling, the menu scrolls up and out of view.
Here's the menu code and the link to the site: http://wtr2022.webparity.net
<section class="menu-wrap flex-md-column-reverse d-md-flex">
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Project</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
....
</section>
UPDATE: I tried adding the following CODE from here: Bootstrap Navbar fixed on scrollY > 50, sticky but it doesn't work. You'll find this code under js/wtr-custom.js
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener('scroll', function () {
if (window.scrollY > 50) {
document.getElementById('ftco-navbar').classList.add('fixed-top');
// add padding top to show content behind navbar
navbar_height = document.querySelector('.navbar').offsetHeight;
document.body.style.paddingTop = navbar_height + 'px';
} else {
document.getElementById('ftco-navbar').classList.remove('fixed-top');
// remove padding top from body
document.body.style.paddingTop = '0';
}
});
});
// DOMContentLoaded end
Thank you...
The sticky element is not magically sticky throughout the whole page when it sticks; instead it takes into consideration its "parent" container's bounds and is "sticky" only within them. Once you scroll past that parent container and it is out of your viewport, the sticky element will also be out of the viewport.
The "menu code", i.e. the <nav> element you have is all right and would stick if you placed it differently in your layout.
The problem seems to be that the sticky navbar is inside the <section> container, so the sticky navbar only sticks "within" that section. But as soon as you'll scroll past that section, your navbar will be out of sight, too.
I assume you want it to start sticking after scrolling past that first uppper-most <section>. You can try placing your navbar outside your <section> element, so that its direct "parent" container is the <body> element and see what happens.
I think that should do the trick in your example. :)
For a more in-depth read on sticky elements, have a look here:
https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
UPDATE:
First of all, I actually think that the javascript snippet you posted after your update won't be needed at all. Unless I'm misunderstanding, I think you're aiming for quite standard sticky behaviour that should work out-of-the-box. Therefore I'd ditch that javascript for now. :)
Basically, what you should aim for is NOT to put the sticky navbar inside an element/section of the page that you intend to scroll past.
This is a oversimplified version of the site I see in your example:
<body>
<section>
This is the slider section
<sticky-element />
</section>
<section>
This is the "We've been in Serving our Community for nearly 50 years!" section
</section>
...
</body>
The adjustment needed would be to get that sticky navbar out from any container/section than you are intending to scroll past at some point.
<body>
<section>
This is the slider section
</section>
<sticky-element />
<section>
This is the "We've been in Serving our Community for nearly 50 years!" section
</section>
...
</body>
This way it would be still rendered below the first slider-section, but would start sticking once you scroll past it.
In pure JavaScript (vanilla)
.html file:
<nav id="menu" class="navbar navbar-expand-lg bg-light">
...
</nav>
...
<script>
let menu = document.getElementById('menu');
let offset = menu.offsetHeight;
window.onscroll = function() {
if (window.scrollY > offset-10) {
menu.classList.add("sticky");
} else if(window.scrollY < offset-20) {
menu.classList.remove("sticky");
}
}
</script>
.css file
.sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
This is what I found worked!
So, with Adele's help, I found this cute little FIDDLE
http://jsfiddle.net/CriddleCraddle/Wj9dD/
from this Stackoverflow answer:
https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll
and the CODE I used was slightly modified from the FIDDLE
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop());
if ($(window).scrollTop() > 699) {
$('#ftco-navbar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 699) {
$('#ftco-navbar').removeClass('navbar-fixed');
}
});
as I scrolled, I watched the output from the console log and when I hit 700, I adjusted the > < accordingly to be what you see above and it works!
659.0908813476562
674.54541015625
689.0908813476562
700 <<<<<< THE TARGET
703.6363525390625
717.272705078125
There was no need to move the NAV element and when I put it back to it's original position, everything fell into place.
Thanks to Adele's inspiration and a bit of Sleuthing, I got it!
So, I have this website: https://projeto-jogo-memoria.vercel.app/
I asked some friends to test it and one of them has an iPhone XR. According to the internet iPhone XR's screen width is 414 pixels.
If I open it on dev tools, it works fine: https://i.imgur.com/NWBND0c.png
But this is how it shows up on the phone: https://i.imgur.com/YVZU2gw.jpg
I noticed the margin between circles is a lot bigger, but I don't know why this is happening. Could you guys help me?
EDIT ------
I noticed when the game is complete every (when every face is flipped) the margin works fine. On my code every button has an anchor tag like this:
<a id="card_${j}" class="card-round-container${(vals.includes(j) ? '' : ' ms-2' )} d-inline-block" onclick="proximoRound('#card_${j}')">
<div class="card-round-back card-round-${tamanho_tabuleiro}x" onclick="">
<i style="font-weight: bold;" class="d-none card-round-${tamanho_tabuleiro}x-icon fa-responsive-size-${tamanho_tabuleiro}x">${tabuleiro[j]}</i>
</div>
</a>
When two cards with the same icon are flipped, I set type="" and onclick="" properties on the anchor and it seems to works fine. Maybe the bug is coming from the type="button" on the anchor?
EDIT -------
EDIT²:
This code is an example of the container, a row and a card.
<div class="container">
<div id="tabuleiro" class="row mb-3 mb-sm-4 mb-xl-3 mb-xll-5">
<div class="mb-2 text-center col-12">
<a id="card_0" class="card-round-container d-inline-block" type="button" onclick="proximoRound('#card_0')">
<div class="card-round-back card-round-4x" onclick>
<i style="font-weight: bold;" class="d-none card-round-4x-icon fa-responsive-size-4x">2</i>
</div>
</a>
</div>
</div>
</div>
SOLUTION: I removed type="button" from the anchor tag and the unecessary margin/padding seems to be removed. This seems to be some kind of problem with safari browser only. Does anyone know why it happened?
according to internet iphone XR screensize is 828x1792 pixels and according to browser inspect tool the screensize of iphone XR is 414x896 pixels and you r design changes below 260px you need to do some css based on the media quesries .
You need to change the height and width of .card-round-4x if goes to below 260px
Just change
#media (min-width: 0px)
.card-round-4x {
width: 40px;
height: 40px;
}
My desktop version of my website is perfect, and runs exactly how it should, however, on mobile. I've been having Issues
Issue 1
When I uploaded the files to the hosting server, the logo was enormous, and threw everything off balance
Image was throwing everything off balance i.e. Huge Navbar, menu button not aligned to the left
I then resolved this issue with the following Code in my CSS
#media only screen and (min-width: 200px) and (max-width: 670px) {
.site-branding img {
max-width:320px;
max-height:56px;
}
.main-header {height:80px;}
}
#media only screen and (min-width: 670px) and (max-width: 1023px) {
.site-branding img {
max-width:640px;
max-height:118px;
}
.main-header {height:140px;}
}
Issue 2
After implementing this, the Navbar shrunk, but so did the logo, and changing the values in my CSS did not change the logo size to an appropriate one. It just stayed the same size
Issue 2 Image
Issue 3
This change also affected my Products page, by extending the navbar length on the mobile version, extending the width of the navbar, while keeping all of the other content to it's original alignment
Issue 3 Image
Conclusion
I'd like to know how to keep the logo and the menu bar aligned on the same line, while increasing the size of the logo for the mobile version of the site.
I also do not know what is causing the issue on the products page, and I have no idea how to resolve that issue.
Thank you
Please check Below code I replace Some Html also I added a comment
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<!-- <div class="site-branding" img src="img/Logo.png" > --> <!-- This is not a right way to put HTML -->
<div class="site-branding"> <!-- I Removed img src="img/Logo.png" -->
<img src="https://logodownload.org/wp-content/uploads/2019/07/mini-logo.png" style="width:100%; height: auto;" /> <!-- Here I changed width 100%; and Height auto -->
</div>
</a>
And also add this css and You can change max-width as per your logo size
#mainNav .navbar-brand {
max-width: 120px;
}
Maybe add display:flex to common parent
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I'm curious if anyone knows why the semantic Navbar <nav> element is housed outside the outer <div class="container"> ?
From the Bootstrap Navbar docs:
https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
My understanding (I thought) was that, in order for Bootstrap to, erm, bootstrap, everything had to be in a container > row > col.
Having used it a bit now, I understand there are caveats and "it's not always that simple" so I'm trying to faithfully perform the ball-achingly tedious work involved in digging into my app's front-end, while also understanding what I'm doing.
Is the answer just as simple as (my guess), <nav> is a "special" element created to live "outside" normal containers due to their special use case (particularly in the case of site/app-wide navigation)?
Steps taken on my own:
Reviewed 10+ "Similar questions"
Spent time on getbootstrap.com
Checked w3schools
Googled "<nav>"
“My understanding (I thought) was that, in order for Bootstrap to, erm, bootstrap, everything had to be in a container > row > col” - for the bootstrap grid system to work - yes. But a navigation is usually not using the grid system to begin with; mostly you have a navigation that is independent from the grid, followed by the main page content that might be using the grid. – CBroe 1 min ago
This answered my question. Thanks.
This enables the navbar to stretch to full width - the .container within it constrains the nav elements themselves. Look at [https://getbootstrap.com/examples/theme/] you'll see the dark navbar strip is full-width.
There's nothing stopping you from making multiple full-width sections each with their own .container div inside. See [https://getbootstrap.com/examples/jumbotron/] for an example - the .jumbotron also has a child .container but the background stretches to full width.
Also, there is nothing special about a .navbar element that means it must sit outside the container, as this example shows: [https://getbootstrap.com/examples/carousel/].
So use a container where you want to set max width and make sure the grid system works.
I am using a Semantic UI sidebar — it's a standard setup:
<div class="ui inverted labeled icon right inline vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
There is also a JSFiddle here.
Semantic UI positions its sidebar with classes right, left, top and bottom. I would like to have the sidebar positioned right for tablets and computers, and top on mobile devices.
What would be the best way to control the position of the sidebar based on the screen size? In other words, how could one position the sidebar on top for mobiles, and leave it on the right for other screen sizes?
Semantic UI has css classes mobile only, tablet only for showing/hiding content. But that's not enough here, because the sidebar is triggered by JavaScript like this:
$('.ui.sidebar')
.sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.menu .tS')
;
so I'm guessing I need some kind of combination of JS and css to achieve the dynamic positioning of the sidebar based on the screen size, but I just haven't been able to get there.
I'd be grateful for your suggestions. I'm especially interested in what would be considered the most elegant solution from the point of view of Semantic UI.
This is my first project using Semantic UI.
All best,
Tench
Mobile only and tablet only are actually just media queries that show/hide elements based on some predetermined screen width. You can do this on your own using jQuery.
$(window).resize(function () {
if (window.innerWidth < 600) { //Some arbitrary mobile width
$(".sidebar").addClass('top').removeClass('right');
} else {
$(".sidebar").removeClass('top').addClass('right');
}
});