I am currently working on a website and at the top of the site i have a navigation bar that stays at the top of the screen as you scroll. Here is a sample image of it: https://i.imgur.com/R4QiDoP.png
The problem it, when I scroll down, some (but not all) text is visible through the navigation bar and makes it illegible: https://i.imgur.com/LDnZ3ZN.png
Here is the code for the:
HTML
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Tools</li>
</ul>
<ul class="pull-right">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
CSS
.nav {
position: fixed;
background-color: #efefef;
border-bottom: 1px solid #dbdbdb;
width: 100%;
top: 0;
opacity: 1.0;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
.nav a:hover {
background: #e1e1e1;
color: black;
}
.nav li {
display: inline;
}
I have already tried changing the opacity but that made it illegible 100% of the time. I am willing to try any suggestions that you have. Thank you!
Check the z-indexes you use in your website and make sure to give the .nav the heigest z-index, that should solve the problem. Do it like this:
.nav {
z-index: ...; /* higher amount than used somewhere else */
}
Let me know if that works or not!
Your nav and the rest of the page are likely on the same 'layer' which is mish-mashing them together when they overlap. Try adding a z-index to .nav to place it 'above' the rest of the page. The z-index number will need to be 1 higher than the current highest z-index on your page (if no other element has a z-index, that would be 1).
.nav {
z-index: 1;
}
Related
I am trying to follow some online HTML CSS course and tried to code an website like this website
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
When I tried to see the hided button Merchandise, Extras, Media 's information, I saw the Elements and I saw that the padding is 8px 16px, as you can see in this picture
But when I coded like them, used their information, the block became small. Like this picture
Here is some of my code
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
</div>
My styles.css file is here
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav li:hover .subnav {
display: block;
}
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
top :100%;
left :0;
}
#nav .subnav a {
color: #000;
padding: 0 16px;
}
My question is, why I set padding exactly they display but it became fell in ?
Thank you very much for your time.
If I understand correctly, your question is why the widths of your <li> elements are shorter than the example.
In short, add min-width: 160px; under your #nav .subnav a CSS selector.
#nav .subnav a {
min-width: 160px;
color: #000;
padding: 0 16px;
}
Explanation:
As in your screenshot, the original example has CSS "width: 100%" which I believe you've tried but didn't work as expected. In fact, that 100% means it will follow the father <div> width (shown in following screenshot), which is set to "min-width: 160px;". Instead of following the exact structure, you may want to keep it simple, so just add "min-width" to <a>!
CSS of example page
Hello this is my first time using Sass on a project so im not sure if it is because I setup the code in correctly in sass or if its the particles js causing issues.
Logo - For some reason im able to change the size of the logo but I'm not able to change the color.
Menu Links - Not sure why but for some reason the menu's underline is not working and I cant even click on them if I wanted to but when I change the size of links it works.
Here is a link in case you want see it live
http://lonestarwebandgraphics.com/
<div id="header-home">
<!-- <div id="particles-js"></div> -->
<div class="container">
<nav id="main-nav">
<img src="img/RE-LOGO_01.png" alt="My Portfolio Logo" id="logo">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Capabilities</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
</nav>
<div class="header-content">
<h1>DESIGNER</h1>
<h1>+</h1>
<h1>DEVELOPER</h1>
<p class="lead">Welcome to my website. I am a Graphic / Web Designer & Web Developer</p>
</div>
</div>
<div id="particles-js"></div>
</div>
CSS CODE
#logo {
width: 70px;
height: 70px;
color: #fff;
}
#main-nav {
z-index: 20;
display: flex;
justify-content: space-between;
padding-top: 1rem;
background: none;
ul {
display: flex;
}
li {
padding: 1rem 1.5rem;
}
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
// CSS Below is For Border Bottom Hover Effect
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 1s;
&:hover {
border-color: $light-blue;
}
&.current {
border-color: $yellow-color;
}
}
}
The div's with classes .particles-js-canvas-el, .header-content, #header-home #particles-js, #header-home are above the nav bar which are making to click on those items instead of actual nav bar elements, so you have to send them back and get the navbar to front so that you can click on the items.
Add the follwing code at the end of the main.css file
css/main.css
.white-logo { filter: brightness(100); }
body
{
background: #00111e;
}
.particles-js-canvas-el, .header-content, #header-home #particles-js
{
position: absolute;
z-index: -100;
height: 100%;
width: 100%;
}
#header-home
{
background-color: rgba(0, 0, 0, 0);
z-index: -1;
}
To change color of the logo, apply the required class from the css
<img src="img/RE-LOGO_01.png" alt="My Portfolio Logo" id="logo" class="white-logo">
Thank you
I was able to fix my problems. By playing with the code and getting some advice on here.
for the logo I just uploaded a white svg to save time. At first I was try to upload svg at original colro and change it with css but after looking at examples it looked like you need to add a lot of code or use some javascript so to make it easy I just changed the color in photoshop.
to fix the navbar I add position Relative in css
HTML
<nav id="main-nav">
<img src="img/logo-white-1.svg" alt="My Portfolio Logo" id="logo">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Capabilities</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
</nav>
SASS
#main-nav {
z-index: 20;
display: flex;
justify-content: space-between;
padding-top: 1rem;
background: none;
position: relative;
ul {
display: flex;
}
li {
padding: 1rem 1.5rem;
}
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
// CSS Below is For Border Bottom Hover Effect
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 1s;
&:hover {
border-color: $light-blue;
}
&.current {
border-color: $yellow-color;
}
}
}
I uploaded to this domain for now but I plan on moving the website to another domain later (in case this link doesnt work in the future)
http://lonestarwebandgraphics.com/
I'm running into issues on my first ever website. I have successfully created a navigation bar at the top which looks and acts somewhat how I want it to (other than the color scheme but that can come later). The issue is that whenever I click a different link on the bar I want that box to change color, but it is currently stuck highlighted on the homepage. I think this is something super simple but i cannot find it. Thank you for the help.
body
{
font-family:sans-serif;
width: 100%;
margin: 0px;
}
/* upper strip holding the tabs*/
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position:fixed;
top: 0px;
width: 100%;
background-color: #328CC1
}
li
{
float:left;
border-right:3px solid #30FFE3;
}
li a
{
display: block;
color: whitesmoke;
text-decoration: none;
padding: 14px 16px;
text-align: center;
}
li a:hover:not(.active)
{
background-color: #111;
}
a.active
{
background-color: #EAB126
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Academics</li>
<li>Athletics</li>
<li>Contact</li>
</ul>
Change this:
a.active
background-color: #EAB126
}
to this:
li a:focus {
background-color: #EAB126
}
Here is the JSFiddle demo
This does what you ask BUT if this is a navigation bar then bear in mind that the control will lose focus as soon as you change page. It would be better if you use Javascript/JQuery to handle that much more easily.
A typical way of handling this is to have each page have a class that includes the page name: <div class="academics"> for example.
Now modify your header (within the page div) as follows:
<ul>
<li><a class="for_home" href="#home">Home</a></li>
<li><a class="for_academics" href="#academics">Academics</a></li>
<li><a class="for_athletics" href="#athletics">Athletics</a></li>
<li><a class="forcontact" href="#contact">Contact</a></li>
</ul>
this would be followed by the css as follows:
.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact {
background-color: #EAB126;
}
Then the menu item for the current page will be highlighted.
Congratulations on your first website!
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
I have a Logo at the top of my page that is designed that it has letters that hang down over the menu bar(a 'y').
With no real special coding (just setting the heights of the containers I have gotten this to look fine.
My problem is that the img blocks the links in the menu from being clickable as the links are sitting behind the transparent background of the logo.
I hope that made sense.
I will include my code, but as I said its pretty simple.
<header>
<asp:Image ID="Image1" CssClass="logo" runat="server" ImageUrl="/media/1001/logo.png" />
</header>
<menu>
<ul>
<li>Home</li>
<li>How To Order</li>
<li>Products</li>
<li class="noBorder">Blog</li>
</ul>
</menu>
CSS:
header { background-color: #3a8c86; border-bottom: solid 4px #20716b; height: 52px; }
header img.logo {margin-left:5px;}
menu { background-color: #e78898; height: 21px; }
menu ul li { float: left; list-style: none; margin: 3px 0 0 14px; padding-right: 14px; border-right: solid 1px white; }
menu ul li a { color: white; text-decoration: none; }
Thanks in advance.
Position the image and then give it a lower z-index value
header img.logo {
position:relative;
z-index:-1;
}
http://jsfiddle.net/8ydvmedr/