I am working on designing a page by looking at the image I have. I am stuck on the menu bar design as I am not able to figure out how can I design the menu bar like I have in my image. It should exactly match with what I have in my image.
Here is my jsfiddle and here is my image which I am trying to replicate.
I tried creating horizontal menu bar as shown in that image but somehow my menus are not showing at all. It looks like they are hidden somewhere. Here is my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png">
<h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>
What is wrong I am doing here? Also I need to make Log in | Sign up using font aswesome (and I have already imported its css in my jsfiddle) and GET COVERED button as well.
The first 2 problems are:
.dropdown {
display: none; /* get rid of this */
}
and you need your img to float: left.
Related
I believe I have some fairly decent knowledge of HTML, CSS, and JS. However, I am stuck on one little bug. Whenever I click my hamburger menu icon, an overlay appears giving the user options to navigate throughout my website. I have managed to disable the scrolling of the body whenever the hamburger menu is clicked, however, once the user clicks the appropriate anchor tag, taking them to their desired location on the website, I want scrolling re-enabled.
It may seem like a little fix but I've been battling with this bug for quite some time and my brain feels fried right now lol. If anyone can shed some light on it, it'll be much appreciated.
My code is below:
HTML:
<header>
<div class="container">
<nav class="nav-container">
<div class="menu-toggle">
<i class="fas fa-bars" onclick="lockScroll();"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-items nav-toggle" id="menu">
<li class="nav-links">
Home
</li>
<li class="nav-links">
About
</li>
<li class="nav-links">
Projects
</li>
<li class="nav-links">
Contact
</li>
</ul>
</nav>
</div>
</header>
CSS:
.lock-scroll {
overflow: hidden;
}
JavaScript:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
} else {
$('body').addClass('lock-scroll');
}
}
You can call the remove scroll function again on anchor click:
$("a.nav-link").click(function(){
$('body').removeClass('lock-scroll');
})
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
I'm looking into an issue on a site that I manage.
Whats happening is that when you look at the cached version of the site (the text version) from Google it is not showing some of the child navigation links.
I'm not quite sure how google bots work to find these links but I cant see anything wrong with my markup.
Here is a snippet of code that i use for the navigation:
<div id="tabsPanel">
<ul>
<li class="home" id="home_item">
home
</li>
<li class="type" id="shopbystyle_item">
Style
<ul id="menucontainer" class="submenu" style="display: none;">
<li class="style1" id="contemporary_item">
<a href="/modern" class="item">
Modern
</a>
</li>
<li class="traditional" id="traditional_item">
<a href="/traditional" class="item">
Traditional
</a>
</li>
</ul>
</li>
<li class="type" id="shopbycolor_item">
Color
<ul id="menucontainer" class="submenu" style="display: none;">
<li class="style1" id="blue_item">
<a href="/blue" class="item">
Blue
</a>
</li>
<li class="traditional" id="red_item">
<a href="/red" class="item">
Red
</a>
</li>
</ul>
</li>
</ul>
</div>
The "Home" and "Style" links are picked up by Google however the "Modern" and "Traditional" links are not.
I use JavaScript to show/hide the sub menu but surely this shouldn't cause Google to not pick up those links? On other sites I have seen Google pick up links on navigation items that are shown using JavaScript.
Could it have something to do with the fact that both of my submenu ul elements have the same ID?
My question is why is Google only seeing the parent links and not the child links?
It turns out that using absolute URL's for the sub menu items worked. Not sure why this would be but i changed the following:
From this:
<li class="style1" id="contemporary_item">
<a href="/modern" class="item">
Modern
</a>
</li>
To this:
<li class="style1" id="contemporary_item">
<a href="http://www.example.com/modern" class="item">
Modern
</a>
</li>
Like the title says, I have a sidebar menu that I'm trying to get to completely slide up and out of sight when one of the menu items, blog, is clicked. Similar to this jsfiddle I found (preferrably without js simply bc I hardly know it, but if that's the only way no big): fiddle ; except my menu is already open and you will be clicking an item inside the menu to slide it up. I'm trying to get the menu to slide up slowly.
The menu looks like this:
Logo
home
blog
instagram
about
store
portfolio
contact
Everything I try changes the whole layout of the sidebar, which I don't want. Here's some of my code:
<div id="sidebar">
<div id="navigation">
<div id="logo">
<img src="Logos/headerlogo.jpg" width="208" height="80" longdesc="Logos/headerlogo.jpg">
</div>
<hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
<ul class="first" >
<li> Home</li>
<li> Blog</li>
<li> Instagram</li>
<li> About</li>
<li> Store</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</div>
I have some other code in there like a search bar, etc. but this is basically what I'm trying to get to roll up slowly when 'blog' is clicked. Any guidance is appreciated!
easy way to do it is use jquery, i think it impossible just with html and css, take a look with http://api.jquery.com/slideup/
You can get this effect by using jQuery's .animate and animating the position of your elements. In your case, you could do something like this, using a margin to create the sliding up animation. Please note that I added a class called blog to the blog link.
$('.first .blog').click(function(){
$('#sidebar').animate({
"marginTop": "-=500px" //animate margin to create slide up animation
}, 1000); //duration of animation, in milliseconds
});
Check out this JSFiddle.
You could do it like this.
FIDDLE
HTML:
<div id="sidebar">
<div id="navigation">
<div id="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" width="208" height="80" longdesc="Logos/headerlogo.jpg">
</div>
<hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
<div class="menu">
<ul class="first">
<li> Home
</li>
<li> <a class="blog" href="#" title="" runat="server">Blog</a>
</li>
<li> Instagram
</li>
<li> About
</li>
<li> Store
</li>
<li> Portfolio
</li>
<li> Contact
</li>
</ul>
</div>
Javascript:
$(".blog").on("click", function () {
var slide = $(this).closest(".first");
$(slide).slideToggle("slow");
});
I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.