Can someone tell me how I can have text in line with five links please in my menu using html and css?
The current code is
<div class="menu content">
<ul id="nav">
<h1>JEWLLERY</h1>
<li>Home
</li>
<li>Jewellery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
<li>Reviews
</li>
</ul>
</div>
<!-- end of menu -->
I want the "JEWELLEY" to be on the left side with the links following, thanks.
The Content is in the menu bar at the top of my website.
I want the menu to appear as
JEWELLERY HOME Jewellery Locations Contact Us Reviews
However at present the links (home, jewellery, locations, contact us, reviews) are displaying below "JEWELLERY"
Thanks.
Try display property
h1, li{
display:inline-block;
}
Fiddle Demo
Another Scenario
In this, you have to pick out <h1>JEWLLERY</h1> from the <ul>
h1{
float:left; // can be replaced by display:inline-block; and vertical-align:top;
}
ul{
display:inline-block;
}
Updated Demo --> http://jsfiddle.net/U2PPu/1/
Note: I'm using both display:inline-block and float:left property just to make you familier with both rules, otherwise display:inline-block is enough.
#nav
{
list-style:none;
}
#nav li
{
float:left;
}
Related
I want to place "Shop by category" beside the ebay logo using margin-left and margin-top.
margin-left is not working or pushes some elements with it index.html
.navclass >ul >li{
list-style-type:none;
display:inline;
padding:5px 25px;
//float:left;
margin-top:1px;
margin-left:20px;
border:1px solid black;}
in the html i made the image and search in a separate div
and added this down
</div>
<nav class="navclass">
<ul>
<li>Shop by <br> Category
<ul class="sub-menu">
<li>Collectibles&art</li>
<li>Electronics</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
</ul>
<span class="arrow">▼</span>
</li>
</ul>
</nav>
Why not to use float:left; in css for logo and nav? You will get what you want and i think that will work better. Because margins can not work with different size screens i think.
I am just starting out in web coding and am gettng an issue with positioning of menu bar items when I trying to recreate the BBC website. The menu options should go from right to left but are instead just being shows as a list which is on the same line as the logo and sign in section at the top.
I hope you can assist in telling me where I am doing wrong. Here is my jsbin code dump:
https://jsbin.com/wuteni/edit?html,output
Any assistance or tips will be most appreciated.
#topmenudiv ul {
margin:0;
padding:0;
list-style-type:none;
}
#topmenudiv ul li {
display:inline;
vertical-align:top;
}
And to now have the images also in-line change HTML to:
<div id="topmenudiv">
<ul>
<li><img src="images/signin.png"/></li>
<li><img src="images/bbclogo.png"/></li>
<li> News </li>
<li> Sport </li>
<li> Weather </li>
</ul>
</div>
I have being trying to find a solution with a menu i have on a custom html website that it is not appearing but i can't for some reason find a solution and i'm quite curious what i'm doing wrong.
<div class="header_area fix" id="header">
<div class="header_top fix">
<div class="left_logo floatleft fix">
<img src="img/logo.png" alt="Burning Desire Stoves Fireplace and Fire Centre" />
</div>
<div class="main_menu floatright fix">
<button style="floatright" id="mobile_button">Menu</button>
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">Stoves
<ul>
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul>
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
</div>
</div>
You can check the website here
The site is a for a client of mine he said he added some extra menu option without touching the css and then the menu broke. More importanly the dropdown of the menu is not appearing and i was trying to make come the surface with some display:block or z-index with no luck.
Also he has add a PHP CMS called Couch which is adding tag.
To give you a better idea the following code as actually a snippet and it is located in a most likely cms path "editor/snippets/header"
.main-menu>ul>li>ul {
position:absolute;
}
Your Menu Has a Dropwown but it is not hidden , so it takes some space. and the header has oveflow hidden, so the menu is becoming hidden entirely.
Add this css and your menu will be shown,
but you need to add code for dropdown to work.
This CSS is all kinds of jacked up.
The issues:
overflow: hidden on the .fixed element is causing the text to disappear.
As far as I can tell, there's no CSS that displays the drop down lists on hover
The drop down lists aren't hidden, so they're taking up space forcing the main list out of the nav bar
There's still list-style-type:disc for the li elements
I'll fiddle with it for a minute, but those are the issues.
Update I fiddled with the CSS and got the dropdowns to display. You'll have to make them look pretty with some CSS, but they're working. Yeah, it's kind of hacky, but I did what I could with the 5? CSS sheets all competing for screen time.
/* menu extra css */
.dropdown:hover .dropdown-hidden {
display:block;
}
.dropdown-hidden {
float: none!important;
display: none;
position: absolute;
z-index: 99999999;
left: 0px;
background: #fff;
}
.dropdown-hidden li {
display: block;
float: none!important;
position: relative;
}
.fix {
overflow: inherit!important;
}
li {
list-style-type: none;
}
-
<ul>
<li>Home</li>
<li>Showroom</li>
<li class="dropdown">
Stoves
<ul class="dropdown-hidden">
<li>Woodburning Stoves</li>
<li>Multifuel Stoves</li>
</ul>
</li>
<li>Fireplaces</li>
<li>Fires
<ul class="dropdown-hidden">
<li>Gas Fires</li>
<li>Electric Fires</li>
</ul>
</li>
<li>Case Studies</li>
<li>Contact</li>
</ul>
I am using a WordPress theme called 'Wordpress Foundation v2 by 320press'
I am using the custom menus within the WordPress dashboard, I want to add a class to the 'li' to change the styles of the sub menus:
For Example:
About Us - will have a sub menu of four sublinks, therefore i want to add a class to that submemu called .fourNav which will then set each 'li' a with of 25%.
Then Customers - will have 2 sub links, so i want to add a class called .twoNav to each 'li' which will have a width of 50%.
I also want to add another class on top of these for each 'li' that will have a background image to each 'li'.
The Wordpress menu allows you to add classes and a description which will be displayed in the menu, but when i inspect the element the classes are not getting applied.
However when i add the class manually within the DOM it picks up the CSS and works.
How can i add the menu system to its full ability within this theme?
This is what im doing, but its not adding the class on:
http://thesis-blogs.com/add-a-custom-class-to-each-item-in-the-wordpress-menu/
So what i think i need is a snippet of php to allow the menu system to work with my theme. As when i add in the class in the dashboard my theme doesnt apply it.
This is the code that gets outputting in the html: -
<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
<li id="menu-item-5" class="has-flyout active">
Home
<ul class="flyout" style="display: none;">
<li id="menu-item-50">sub menu four</li>
<li id="menu-item-51">sub menu three</li>
<li id="menu-item-52">sub menu two</li>
<li id="menu-item-53">sub menu one</li>
</ul>
</li>
</ul>
you have to edit the template code directly...
i think the menú is in
worpressdir/wp-content/themes/yourthemename/header.php
in order to edit this correctly you will need a medium skills with PHP and html. good luck
Go to Appearance -> Menus -> Screen options - then the following
As far as I understood from your requirements this is how it should work:
1. When you hover over a menu item, it should get a new class name.
2. When you hover over a sub-menu item, both the sub-menu item and the parent element of the corresponding sub-menu item should get a new class name.
If this is what you want checkout this jsfiddle. I have used jquery for this. Check if this helps you.
HTML:
<ul class="menu-bar">
<li class="menu-block">Menu 1</li>
<li class="menu-block">Menu 2
<ul class="sub-menu-block">
<li class="sb-menu-list">Sub Menu</li>
<li class="sb-menu-list">Sub Menu</li>
<li class="sb-menu-list">Sub Menu</li>
</ul>
</li>
<li class="menu-block">Menu 3</li>
<li class="menu-block">Menu 4</li>
<li class="menu-block">Menu 5</li>
</ul>
CSS:
.menu-bar{
background-color:blue;
width:100%;
display:inline-block;
}
.menu-bar > li{
display:inline-block;
position:relative;
}
.sub-menu-block{
display:none;
position:absolute;
top:20px;
padding-left:0;
width:75px;
padding:10px 3px;
background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
display:block;
}
.sub-menu-block li{
list-style: none;
display:block;
padding: 4px 0;
}
.sub-menu-block li:hover{
background-color:red;
}
JQuery
$(function(){
$(".menu-block").on("mouseover",function(){
$(this).addClass('hovered');
});
$(".menu-block").on("mouseout",function(){
$(this).removeClass('hovered');
});
$(".sb-menu-list").on("mouseover",function(){
$(this).addClass('child-hovered');
$(this).parents(".menu-block").addClass('parent-hovered');
});
$(".sb-menu-list").on("mouseout",function(){
$(this).removeClass('child-hovered');
$(this).parents(".menu-block").removeClass('parent-hovered');
});
});
I am try to make drop down menu but i don't know why when ul hover than drop down li not appear correctly i have use z-index and also use position relative.Please check this on top menu.
Css
#menu > ul > li:hover ul {
display:inline;
}
#menu ul li ul{
position:relative;
display:none;
list-style: none;
margin:0px;
width:200px;
z-index:1000;}
Html
<div id="menu">
<div class="home-icn">
<i class="icon-home"></i>
</div>
<ul >
<li><a id="print_menu" href="">Printing</a>
<ul id="drop_menu_f">
<li><a>Business Cards</a></li>
<li><a>Brochure</a></li>
<li><a>Door Hangers</a></li>
<li><a>Envelopes</a></li>
<li><a>Flyers</a></li>
<li><a>Invoice Books</a></li>
<li><a>Magnet Cards</a></li>
<li><a>Note Pads</a></li>
<li><a>Post Cards</a></li>
<li><a>Plastic Cards</a></li>
<li><a>Posters</a></li>
<li><a>Presentation Folders</a></li>
</ul>
</li>
</ul>
</div>
http://jsfiddle.net/hnTyB/1/
<div id="menu">
<ul>
<li>My Menu
<ul>
<li>thing</li>
<li>thing2</li>
</ul>
</li>
</ul>
</div>
I made a js fiddle of what it appears you are trying to do. Copying your css exactly, this seems to work for me. Could it be your html and css don't correctly match?
I checked out your site soniprinting.com (saw the URL in your screenshot) and it looks like you are missing a z-index from your #menu ul.
Add a z-index greater than those of the slideshow, and you should be able to see your dropdown just fine.