Forgive me, I know this question has already been asked but I wasn't able to find a solution and I've been trying for days with no luck.
I removed the "Pages widget" from Blogger in order to create a custom navigation bar with drop down menus. Everything works fine, except my tabs WILL NOT CENTER. The nav bar itself seems to be centered... just not the tabs. I feel like I've tried every code out there! It's driving me nuts!
http://www.ginachristiansenphotography.com
Please, please help!
Just add center ;) tag in the ul.
<ul id="cssnav">
<center>
<li class="active">Home</li>
<li>About
</li>
<li>Blog
</li>
<li>Archives
</li>
<li>Services
<ul>
<li>General Pricing</li>
<li>Weddings</li>
<li>Dream Scenes</li>
</ul>
</li><li>Galleries
</li>
<li>Contact
</li>
</center>
</ul>
Below CSS will make the tab nav center
#cssnav{text-align:center}
Related
So I'm hosting a website from github, and I want to add a blog section to it, therefore, I chose Jekyll.
And the problem is on my main page I add a Blog section to link it to the Jekyll autogenerated html site, and it doesnt show any of the css, just only shows pure html
How does I fix this problem?? Thanks
Picture
<header>
<div class="container">
<nav>
<ul>
<li> Home</li>
<li> About me</li>
<li> Resume </li>
<li> Projects </li>
<li> Hobbies</li>
<li> Blog</li>
</ul>
</nav>
</div>
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
I did some searches on the matter but seem to receiving mixed answers and I'm not entirely sure how to go about this given my limited coding knowledge.
I downloaded a website template called Brushed by Alessio Atzeni (mentioned for easier reference). The template is fantastic but unfortunately it does not come with dropdown functionality so I looked up a couple of tutorials and have managed to create my own.
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home-slider" title="rando"></a>
</div>
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>Intro</li>
<li class="dropdown">Our Services
<ul id="menu-nav-dropdown">
<li>Social Media</li>
<li>Graphic Design</li>
<li>Development</li>
</ul>
</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
This is the HTML for index.html for the navbar, when I hover over "services" the dropdown appears and each individual element highlights as a result of me hovering but when I click it nothing happens. However, if I right click and "open in new tab" that proper page is generated.
I chose not to include the CSS to prevent cluttering the post, but if you need any other information I'll gladly provide it as soon as possible. Does anyone know what the issue might be? Thank you in advance.
EDIT: here is the http://jsfiddle.net/tuvon83p/1/ it doesn't look good at all but I believe the functionality is there and working properly (you just need to hover over to the right to see the links because there isn't a background).
Try
nav ul li ul li a{
position: relative;
top:0;
left: 0;
z-index: 999;
display: block;
}
basically: In the navigation, locate all ul, locate all li, locate all ul, locate all li, and select the a and it should go to the unclickable and put it above all things. There may be something above it?
I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.
The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.
On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li>Home</li>
<li>Contact Us</li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li>Web Design</li>
<li>Photo</li>
<li>Video</li>
<li>Hosting</li>
<li>Emails</li>
<li>Domain Names</li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li>Control Panel</li>
<li>Webmail Login</li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
Can anyone help please!?
In ZURB Foundation 3, this line:
<li class="toggle-topbar"></li>
should be changed to:
<li class="toggle-topbar"></li>
This is just a placeholder for jQuery
Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.