I tried adding a logo to my navigation bar, but whenever i add the logo to the code, it just messes up the padding of the navbar itself and extends enough for it to have space to lie on it without overlapping, which is exactly what I need for the assignment I am given.
I need to add a png logo, larger than my navbar and for the logo to overlap from the top and bottom of the navbar, the png logo is just a simple leaf without background.
Here is a picture showing my result and the needed result
.menu {
text-align: left;
background-image: url("navigation-background.jpg");
}
.menu ul{
display: inline-flex;
list-style: none;
color: maroon;
}
.menu ul li{
margin: 0;
padding-left: 10px;
padding-right: 10px;
display:inline;
text-align: center;
}
.menu ul li a{
text-decoration: none;
color: white;
display: flex;
}
.menu ul li img{
display: flow;
}
<div class="menu">
<ul>
<li><img src="leaf.png" style="width: 40px;height: auto;"></li>
<li>
Дома
</li>
<li>
Сервиси
</li>
<li>
Зa нас
</li>
<li>
Контакт
</li>
<li>
Најава
</li>
</ul>
</div>
Any opinions/tips would be welcome when it comes to my code, I am a total newbie so take it easily.
Thanks!
you should adjust:
style="width:40px;height:auto;
increase height from 40 incrementally and check whether ok
Related
This question already has an answer here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 2 years ago.
I made my navigation bar and positioned it (fixed), and it works fine. I was able to scroll down and all. As soon has I added filter (brightness) to it the image on my page, the navigation bar disappeared. I have tried using pseudo-elements and setting the position (absolute/relative), I set the filter property to the container of the child element of the image, it still didn't work. Can someone help me on how to have my navigation bar display on fixed position and still have the image filtered. Thanks in Advance.
nav {
position: fixed;
background-color: #fff;
}
nav ul {
margin: 0;
padding: 0;
}
.navbar-brand {
padding-right: 20px;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
color: #000;
text-decoration: none;
}
nav a:hover {
color: #ff6600;
text-decoration: none;
}
.title-image img {
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
JSfiddle Demo
Just add z-index to your nav element as follow
nav{
position: fixed;
background-color: #fff;
z-index:999;
}
nav ul{
margin: 0;
padding: 0;
}
.navbar-brand{
padding-right: 20px;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
color: #000;
text-decoration: none;
}
nav a:hover{
color: #ff6600;
text-decoration: none;
}
.title-image img{
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
The navbar didn't disappear, it is just beneath the image. To have it in front, you should use z-index: 10; (or any value greater than 0).
See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
In addition, keep in mind that your image - or any element after your navbar - will be positioned on top of your page. May be you'll want to let the equivalent of the navbar height as space before any content.
I have a navigation which uses a full width drop down sub-menu (the about drop down) but I am struggling to align the links within the submenu centeraly underneath their parent. I also need this to be responsive so the sub-links stay central no matter the view width.
Could anyone help me by telling me where I am going wrong or what I would need to do to achieve this effect?
Thanks in advance for any help.
.navigation--main li:hover>ul {
display: flex;
justify-content: center;
}
ul.navigation--main li ul {
background: #000;
color: #fff;
display: none;
position: absolute;
top: 114px;
left: 0;
width: 100%;
}
ul.navigation--main li ul li {
padding: 1.5em 0.5em;
}
<div class="navigation--container">
<div class="logo">
<img src="assets/img/Group 85.svg" alt="ORRAA Logo" class="homeLogo" height="78.93" width="260" />
</div>
<div class="navigation">
<ul class="navigation--main">
<li>Home</li>
<li>About
<ul>
<li>
Ocean risk</li>
<li>
About ORRAA</li>
</ul>
</li>
<li>Membership</li>
<li>Governance</li>
<li>Contact</li>
</ul>
<ul class="navigation--social-icons">
<li>
<img src="assets/img/facebook.svg" alt="facebook">
</li>
<li>
<img src="assets/img/instagram.svg" alt="instagram">
</li>
<li>
<img src="assets/img/Path 22.svg" alt="twitter">
</li>
</ul>
</div>
</div>
you can change in css file.. hope this solution help you.
.navigation--main li:hover>ul {
display:flex;
justify-content:center;
width: calc(100vw - 112px);
}
.navigation--main li:hover>ul li{
margin-left:20px;
}
ul.navigation--main li ul {
background: $brand-sky-blue;
display: none;
width: 100%;
}
ul.navigation--main li ul li {
padding:10px;
}
this is example for reference: codepen.io/arpita1030/pen/pMLQME
I do not know if I understood correctly, but here is my proposal
.navigation--main li:hover > ul {
display:flex;
justify-content: center;
position: static;
}
Now the div in question appears right underneath About navigation link and moves rest of the elements further down.
I have all my buttons of my nav bar and I have my logo already in top left but the bigger i make it, the thicker my nav bar becomes because i have padding set in css and my image URL is set in the Html:
css
li a {
display: block;
color: white;
text-align: center;
padding: 25px 50px;
text-decoration: none;
border: 1px;
}
HTML
<ul>
<li><a class="active" href="#home.asp">HOME</a></li>
<li style="float:right">
<a href="#logo">
<img src="logo.png" alt="bandlogo" height="25px" width="50px">
</a>
</li>
</ul>
Is there a way to counter this issue like make a different <ul> or an addition to the li.
Thank you
Have text styles and image styles separate:
#nav li .text {
padding: x
}
#nav li .logo {
padding: x
}
Host Folder
If you click the link then click "all.html", you should see a page with an unfinished navbar. The lis in the list are stacking for some unknown reason. Could someone tell me why "Member Resources" and on are in a row below and how to fix that? I tried playing with the text-align, float, width, and margins of the containing div, the ul, and the lis but haven't gotten anywhere. Thank you (Note: Using Bootstrap v3.3.6)!
HTML:
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS:
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
SIDENOTE: Does anyone know why there is a scrollbar at the bottom of the page? There's no extra content to the right and I'm pretty sure there are no margins that'd be pushing it out that far. I see it on Chrome, anyone else see it and know why it's occuring?
You should set width of #topnav ul to 100% for setting it to full width.
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
Second way to see a full width navbar is to do as the bootstrap guide say
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
</div>
</nav>
Look carefully to notice that the navbar is full width and of different color(left intentionally for you to notice). You can remove the background color from your ul and put it on your navbar class instead instead
Try this:
HTML
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}