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.
Related
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 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 have a navigation menu consists of (floated left logo , navigation anchors -
floated right search form) on large and medium screens and (floated left logo ,
floated right burger icon) on small and extra small screens
<div class="navbar">
<a href="#"> <img class="navbar-brand"
src="http://www.placehold.it/50/50"/> </a>
<div class="search-form">
<form>
<input type="text" class="search-input">
<button type="submit" class="search-button"><img src=""/></button>
</form>
</div>
<div class="navigators">
<ul class="tabs">
<li class="active">Home</li>
<li>About</li>
<li>Resourses</li>
<li>Contact</li>
</ul>
</div>
CSS:
.navbar{float:left}
.search-form{float:right}
.tabs{list-style:none;display:inline-block;}
.tabs li{float:left;}
Then I have a burger icon that is hidden on large and medium screens :
<label class="tog" for="toggle">☰</label>
<input type="checkbox" id="toggle"></input>
CSS on medium and large screens :
.tog,#toggle {display:none}
On small and extra small screens when the clicked :
#toggle:checked + .search-form {display:inline}
#toggle:checked ~ .navigators {display:inline}
But they appear on the navigation menu on a separated places , I want them to be show in a vertical list beneth the burger icon when it's clicked , Is that's possible or I will need to duplicate the anchors and the search form and style them to be a vertical list ?
The website is responsive so I don't need a solution that won't be responsive
I would recommend using something like Bootstrap that accomplishes this already through their Navbar component
You're probably using the input so that you can toggle the checked psuedo class, but there is a more elegant solution using CSS and JavaScript for its intended purposes rather than a hacky fix. If you want to implement it yourself there is a more elegant solution to simplify your large and medium screens. You don't want to use label and input (also <input/> is a self closing tag) for a click unless you're submitting something in a form so that you can be syntactically correct for SEO and scalability. You can see this Codepen as a good example of using HTML, CSS, and JavaScript to come up with a good solution.
A blog post from Team Treehouse has a great example of using a pure CSS responsive menu.
When I hover over the image, I want the fade effect of the overlay to activate. I just started working at my first site and I am a javascript begginer, so I need some help. Here is a jsfiddle.
HTML Code:
<div class = "leftpart">
<a href="http://www.google.com">
<img src="images/test.jpg"/>
<div class="flex-caption hvr-fade">Adventurer Lemon</div>
</a>
</div>
I do not have any javascript code.
Inset Css one more Class
Your Main Class add Hover Effect then use .leftpart:hover and then
your footer color change then after add hvr-fade then effece of main
Div hover
.leftpart:hover .hvr-fade
{
background-color: #2098d1;
color: white;
}
Live Demo
You Can do it By css also
.leftpart a img:hover{opacity:0.8;}
I have Flexslider working nicely. However, I needed it to slide under a navigation bar so set it's margin-top to -75px and it's div.flexslider z-index to -2. Looks great but now the next/prev arrows don't fly in and the click navigation doesn't work. It's just an automatic slide show right now. If I remove the z-index setting, it works but shows over the top of the nav bar.
It's sitting in a site using bootstrap 3 :-
<div class="row">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/garden.jpg" />
</li>
<li>
<img src="images/house.jpg" />
</li>
</ul>
</div>
</div>
In Chrome there are no errors thrown in the dev tools. In Firefox, the slider disappears altogether unless the browser window is reduced in size.
What else do I need to adjust to allow the prev/next and slide navigation to work with the z-index set or is there another way?
The answer turned out to be removing the z-index:-2 on the flexslider. Then to push the nav over the top of it, had to add position:relative AND z-index:10. So the position:relative was the key to the solution.
Hope this helps someone else.
Craig