So I am trying to change the logo for a company I work for and when I tried to place it into the coding it screwed up the alignment of the header text. If someone could help me that would be great! I want the 5 groups of text to go right underneath the logo. With the logo aligning at the top left of the web page.Example Image of what is happening now
Coding is:
<div class="header">
<img class="Logo" src="https://www.maxgalaxy.net/SiteData/730/MWI_Images/20161004203121998.png" style="display:block">
</div>
<ul class="topnav">
<li><a class="active" href="https://www.hsviceplex.org/events-calendar/" target="new">EVENTS</a></li>
<li>SPONSORSHIPS/ADVERTISING</li>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>PARTY PACKAGES</li>
<!--
<li>Contact Us</li>
<li>Employment</li>
<li>Fundraising</li>
<li>The Blog</li>
<li>Gallery</li>
-->
<li class="icon">
☰
</li>
</ul>
Related
I want to make two horizontal nav menus, one next to the logo img on the left and the other one on the right side using materializecss framework, but the logo-img is overlapped with the first menu.
.nav-logo {
width: 6.5rem;
}
<nav class="transparent">
<div class="container">
<a href="#" class="brand-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Adyen_Corporate_Logo.svg/1024px-Adyen_Corporate_Logo.svg.png" alt=""
class="responsive-img nav-logo"></a>
<ul>
<li>Our solution</li>
<li>Customers</li>
<li>About us</li>
<li>Documentation</li>
</ul>
<ul id="nav-mobile" class="right">
<li><i class="material-icons left grey-text text-darken-2 center-align">search</i></li>
<li>Contatc us</li>
<li>Log in</li>
<li>create an account
</li>
</ul>
</div>
</nav>
I am making a website about pets. I crafted the pictures that were needed but .. When I put the banner , it does not show up. When inspecting the page - it is not there. If I put it right after the body tag , it will show , also when inspected. But it won't be what I want.
<body>
<ul class="nav">
<div class="logo">
Pets
</div>
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
<div class="banner>
<img class="banner-image" src="testbanner.png">
</div>
I don't get what the problem is.
There are two problems with this I can see.
<ul class="nav">
<!--1: You cannot have a div directly inside a <ul> tag. Move it somewhere else-->
<!--<div class="logo">
Pets
</div>-->
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
<!--2: You must end the string describing the class. This is what is preventing the banner to work-->
<div class="banner">
<img class="banner-image" src="testbanner.png">
</div>
You can't put a div directly in ul.
Assuming you want the banner inherit the nav class, you can add a parent div that contain your banner and the list like this :
<div class="nav">
<div class="logo">
Pets
</div>
<ul>
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
</div>
otherwise if you are not bothered by the bullets or if you hide them with css you can put the banner between <li> </ li> :
<ul class="nav">
<li><div class="logo">Pets</div></li>
<li>Home</li>
<li>Pets</li>
<li>Rates</li>
<li>Contacts</li>
</ul>
Since adding a slide show into my site I now have a odd gap above my navigation bar. I am not sure on how to fix this. I tried what I did last time I had this happening but nothing ...
I have a JSfiddle set up: https://jsfiddle.net/7yj8rkbe/
HTML (for my nav bar):
<img src="img/Logo.png" id="logo">
<li>
Other
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li>
Store
<ul>
<li>Official</li>
<li>Community</li>
</ul>
</li>
<li>
Projects
<ul>
<li>Official</li>
<li>Community</li>
<li>Open Source</li>
</ul>
</li>
<li>
Forum
<ul>
<li>Programming</li>
<li>Technology</li>
<li>Gaming</li>
</ul>
</li>
<li>
<a id="nav-home" href="#">Home</a>
</li>
</ul>
#information {
top: 0;
}
You specified fixed positioning to that div but you forgot to set top value.
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>
Hi Im new to PureCss of Yahoo. Im trying to make a vertical navigation with collapsible items
im wondering why ul in a li doesn't shows any display. No other css. PureCss of Yahoo only.
this is my code:
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li>
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
As i Understood by the documentation you need add pure-menu-open to any menu that you want to show, and some other classes to make it look decent, this is anyways what i came up with.
<div class="pure-u" id="nav">
Menu
<div class="nav-inner">
<div class="pure-menu pure-menu-open">
<ul>
<li>Dashboard</li>
<li class="pure-menu pure-menu-open pure-menu-can-have-children pure-menu-has-children">
Sales
<ul> <!-- this doesn't show :( -->
<li>Create Order</li>
<li>Orders</li>
<li>Sales Report</li>
</ul>
</li>
<li>Purchasing</li>
<li>Reports</li>
<li>Users</li>
<li>Help</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
You can see a live version here http://jsfiddle.net/p4hus/