Materializecss nav logo img with two horizontal menu list - html

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>

Related

Placing space after logo and realigning text

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>

Gap above navigation bar?

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.

Navigation system goes a little weird when resizing browser

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>

Yahoo PureCss Vertical 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/

Make an item in list align to right using CSS 3

I have a list as follows:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
I am attaching an image of so far what I have done.
In this menu, I want to align feedback to the right side.
How can I do it?
Add this to your CSS content.
li:last-child will select the last li of the menu list.
Demo
#menu > li:last-child
{
float:right;
}
Just use float: right;:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li style="float: right;">Feedback</li>
</ul>
You can check the demo here.
Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
Feedback</li>
I had the same question but for the whole list.
Float does not realy work there, so here is what worked for me:
ul{
direction:rtl;
}
This way all your li elements including their ::marker's will be pulled to the right of the parent container.
You can also combine this with selectors to just move single li elements.
ul:first-child,
ul:nth-child(2),
ul:last-child{
direction:rtl;
}
This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>