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)
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
I'm trying to create nav bar similar to that of Uber's site. Where there's a menu button on the left, logo in the center, and then log in and sign up are on the right.
I used and div container="pull-right" and still couldn't get the Title to be center. The buttons won't be stylized much more than what they are since they will be on a white background.
<div class="nav">
<div class="container">
<ul>
MENU</button></li>
TITLE</button></li>
SIGN UP</button></li>
LOG IN</button></li>
</ul>
</div>
</div>
.nav{
color: #5a5a5a;
font-size: 15px;
font-weight: normal;
padding: 15px 15px 5px 5px;
word-spacing: 3px;
}
.nav li {
display: inline;
}
.nav button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
}
.nav a{
color: inherit;
}
Here's my Jsfiddle: https://jsfiddle.net/tokyothekid/r19y23ep/1/
you can try this fiddle
demo
in this i have manage the structure of your li and as per your description i make a design i hope it may help you
.col1
{
margin:0;
padding:0;
float:left;
width:50%;
}
Quick answer
If you want something like the website for Uber, you probably need to separate the Menu from the buttons on the right side.
Other notes
Also, HTML5 has specified special tags so code is more readable and organized, such as the <nav> tag to hold your main menu. <div> doesn't communicate the purpose of the container.
To do what you want, here is a to-do list:
fix your bugs (<a href="somewhere"<li><button>foobar</button></li></a> actually is an error because of the lack of right bracket > at the end of your opening <a> tag)
separate your elements into a menu, a title, and a couple of user account buttons
The code
Here is a good example of how you could restructure your HTML:
<h2 class="top-title">Title</h2>
<nav>
<button id="toggle-menu">Menu</button>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<div class="user-buttons">
<button>Log in</button>
<button>Sign up</button>
</div>
This is a quickly hacked bit of CSS you might use to start with:
h2 {
display: inline-block;
width: 100vw;
text-align: center;
margin: 0;
position: absolute;
z-index: -1;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
padding: none;
position: absolute;
}
nav ul a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
}
div.user-buttons {
float: right;
}
Add some Javascript, and voila:
$(function() {
$("nav ul").hide();
$("#toggle-menu").click(function() {
$("nav ul").toggle();
});
});
JSFiddle example.
First off, I'm really new to this so sorry if I sound dumb ;_;. Now, I'm trying to make a background color on my list items. Like this site has, black bar with the logo, search bar etc.. I tried wrapping divs everywhere but nothing seems to work.
HTML
<nav class="nav-menu">
<div class="container">
<ul>
<li>About Us</li>
<li>Staff</li>
<li>Schedule</li>
<li>Home</li>
</ul>
</div>
</nav>
CSS
.nav-menu ul {
margin-right: 50px;
}
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
}
.container {
color: black;
}
http://jsfiddle.net/Hm4KJ/
Set overflow to auto to display everything in the .content div (now everything is hidden because you use float property)
.container {
background: black;
overflow:auto;
}
I guess it is a typo, anyway , you should set background property instead of color to set background color.
Example
if you only want a background color in each list item you can use this one:
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
background:#000000;
display:inline-block;
padding:5px 10px;
}
http://jsfiddle.net/Hm4KJ/2/
You could add a clearfix after your floating element.
html:
put a
<div class="clear"></div>
after your <ul></ul>
related css:
.clear {
clear: both;
}
and you would need to change color: black; to background-color: black; ;-)
see: http://jsfiddle.net/Hm4KJ/4/
I am doing a website for school, and it's been going well. The only problem I am stuck on is this: The navbar changes size on different sized screens. It's most readily apparent when zooming out, but it is slightly off on different screens.
Here is a screenshot of what I mean:
https://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing
Please note that the left side, which is the problem, moves around a lot depending on the scale. The above image is only one example.
This is my CSS:
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
z-index: 150;
/* min-width: 739px;
max-width: 739px; */
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
This is my HTML:
<ul id="menu">
<li>Showcase</li>
<li>Contact</li>
<li>FAQ</li>
<li>Faculty
<ul>
<li>Mrs. Rosarita Olvina</li>
<li>Mrs. Christine Pavesich</li>
<li>Mr. Francisco Virella</li>
<li>Mrs. Susan Williams</li>
</ul>
</li>
<li>Program Areas
<ul>
<li>Graphic Design</li>
<li>Photography</li>
<li>Video Production</li>
<li>Animation</li>
<li>Art</li>
</ul>
</li>
<li>About
<ul>
<li>What We Do</li>
<li>Where We Go</li>
</ul>
</li>
<li>Home</li>
</ul>
Thank you for any help.
***I tried first answer, it didn't work, but I may be doing it very wrong.
The problem is not necessarily within the menu. Rather the whole menu (or its container) needs to be placed properly.
As far as I can tell from the code you've given, the floats may also play a part in fixing this. The whole menu and nested ULs are floating. My suggestion would be to avoid these floats and work with "display: inline-block" instead to get the horizontal arrangement.
After streamlining the menu entries like that, you can properly position your whole menu container in the surrounding HTML.
In case you don't already use it: Firebug or Chromebug plugins are really handy for identifying errors like this.
Ok hey guys.
So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.
so far I'm working on local on a test html file until I get it working.
so what i got so far is this menu:
<ul id="menu">
<li>Notifications
<ul>
<li id="foot-notify-954>
Xtesting left a comment for your blog 22 hours ago
</li>
<li id="foot-notify-953>
X
<p>testing left a comment for your blog <span>22 hours ago</span></p>
</li>
</ul>
</li>
and my css code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }
I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li>
id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.
First, you have to check the html syntax:
list should looks like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li><a href='#'>Milk</a></li>
</ul>
This tool helps you find the errors (red highlighted):
http://jsbin.com/emowir/1/edit
Here is your example:
<ul id="menu">
<!-- type 1: NOT drop down-->
<li>Home</li>
<!--type 2: drop down-->
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
</ul>
What would you like to insert and where?
Your problem does seem to be bad code formatting. This is a clean and edited version of your code. The code "breaking" is an issue of CSS formatting. Using inline-blocks instead of blocks helps get things lined up properly, and shifting the background style to the <li> rather than the <a> makes it look better.
Your problem is the following:
ul li a {
display: block;
This makes every link you insert into the list a block. Try start to float things like in this example I made from your code, http://jsfiddle.net/xN8sc/1/