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
Related
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
I have two sticky navbars, the first white one from Wordpress with its own sticky function, and the black one below is html/css-only (no bootstrap), and it has a strange movement on mobile, it's hard to explain so let me show you:
When I first load the page, it looks good like this:
But when I scroll down, even if just a little bit, the black navbar kind of bounces suddenly and very quickly and makes the content "jump". I have no idea why this is happening since there is no bug when loading the webpage from a computer! It's only a matter of mobile phones. :S
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 0) {
jQuery('#navbar_reservas').addClass('navbar-fixed');
}
if (jQuery(window).scrollTop() <= 0) {
jQuery('#navbar_reservas').removeClass('navbar-fixed');
}
});
CSS
.navbar-fixed {
top: 60px;
z-index: 1000;
position: fixed;
width: 100%;
}
HTML
<div id="navbar_reservas">
<div id="reservas_left">
<div class="nav-item_reservas" id="inner_reservas_left">
<a id="dudas" href="tel:55555555">
¿Dudas?
<br />555 555 555 </a>
</div>
</div>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
</div>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="unoul">
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>
From what I can see you only add the position: fixed when scrollTop is not 0. That will create a new stacking context when the class is applied. That means it'll no longer be "visible" to the elements around it in terms of positioning. And as such the content below it will jump up to fill the gap.
If you know the height of the navbar already, there is a really simple solution:
When the navbar do not have the navbar-fixed class, apply position: absolute on it so it's always in its own stacking context. Then add the height of the navbar as top padding/margin to the content below it.
If you do not know the height:
You'll need to do the same as above, but calculate the height of it with JavaScript on load. If it changes height on say resize or you have some dynamically changing content, you'll need to make sure to update the height used for the above method when those events happen.
If you can work with relatively new code:
There is a CSS property for all this! position: sticky combined with top: 0 Will make the navbar stick to the top of the screen when it otherwise would scroll up behind the viewport.
However, browser support isn't very impressive:
http://caniuse.com/#feat=css-sticky
I'm having trouble positioning my company logo on our website. It is too low and looks out of alignment. Is there anyway to move the logo up? Or is there a way to set the logo so that there is the same amount of space in between the top and bottom of the nav and image?
Here is the JSFiddle link: Link
<!-- Nav Branding --> <a class="navbar-brand page-scroll" href="#page-top"><img width="30" height="30" src="http://www.edcodie.com/logo.png"></a>
Here is what I have:
Also, my navbar shrinks when you scroll down past the second page. Is there a way to expand/shrink the logo with the nav? I included my JS for the nav shrink/expand.
Thanks!
Adjust the padding-top attribute of the navbar-brand anchor.
FIDDLE
CSS:
.navbar-brand {
padding-top: 10px;
}
you can change padding-top from here. About nav shrink bootstrap have own theme which you can use http://startbootstrap.com/template-overviews/grayscale/
here is tutorial and download files
fix padding for .navbar-brand.
I am using bootstrap, but the question is relevant to any responsive framework
I have a responsive page that looks (in a simplistic way) like this
<div class="wrap">
<div class="row page">
<div class="col-xs-12 col-md-6">
some stuff
</div>
<div class="col-xs-12 col-md-6">
some other stuff
</div>
</div>
</div>
I want to use this layout but to have the scope of the responsiveness be on some parent div (.wrap in this case) and not on the window, meaning if the parent div is at same specific sizes, force the responsive breakpoints to be in effect.
So this way, I can place this 'template' anywhere in the page and the results will be different according the wrap size and not on the screen/window size
Is there a way to do this? Or am I in outer space?
I think there is now way to check for the containers div width (using CSS), but yes you can try checking for the browser size and add/remove some class width which can give similar results.
#media (max-width: 768px){
.wrap{
width:1170px
}
}
#media (min-width: 767px){
.wrap{
width:767px
}
}
Or even better, you can use jQuery. var $widthOfWrap = $('.wrap').width()
I have this HTML for me horizontal CSS menu:
<div id="cssmenu">
<ul>
<li><span>Homepage</span></li>
<li><span>Services</span>
<ul>
<li><span>LINK</span></li>
</ul>
</li>
<li><span>Projects</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>
Whats the best way to use css to make it a dropdown menu (like: http://responsive-nav.com/) when the page gets smaller.
i have made this menu dissapear when the page gets too small using media queries but i would like to just use CSS to change it to be like the menu (link above) and keep the same HTML.
here is a fiddle with the full code: http://jsfiddle.net/auBpX/
Your media queries should override the default styles so put them at the bottom of your css rather than the top.
I'm not going to code the whole thing but this fiddle might get you started.
#media screen and (max-width: 520px) {
#cssmenu {height:10px; overflow:hidden;}
#cssmenu:hover {height:auto; overflow:none;}
#cssmenu li {display:block; width:100%; float:none;}
...
}