I am wondering how i can create a sticky menu bar while scrolling using exclusively html codes. Is this even possible? Website of inspiration http://www.herschelsupply.com.
For clarification... My menubar is consisting of "Plånböcker" "Kundtjänst" "Om Oss".
My HTML code for the menubar is...
<nav id="main_navigation">
<ul class="row">{{! Highlight "All items" if we are on a list page and no navigation item is selected }}
<li class="column {{#list_page}}{{#no_current_navigation}}selected{{/no_current_navigation}}{{/list_page}}"> <a href="{{store_url}}/products">
{{#navigation}}
<li class="column {{#is_current}}selected{{/is_current}}">
<a href="{{url}}">
{{label}}
</a>
</li>{{/navigation}} {{#store_blog_url}}
<li class="column"> <a href="{{store_blog_url}}" target="_blank">
{{#lang}}Blog{{/lang}}
</a>
</li>{{/store_blog_url}}
<li class="column">
<li class="column"> <a href="{{store_url}}/Kundtjänst">
Kundtjänst
</a>
</li> <a href="www.wingmanstore.se/Kundtjänst" target="_blank">
</a>
</li>
<li class="column {{#about_page}}selected{{/about_page}}"> <a href="{{store_url}}/page/about">
{{#lang}}Om oss{{/lang}}
</a>
</li>
</ul>
<div id="search_container">{{search}}</div>{{! By using #is_current within a #navigation block we can find the currently selected navigation item }} {{#navigation}} {{#is_current}} {{! Render the submenu if it has any navigation items }} {{#children?}}
<ul class="child_navigation row">{{#children}}
<li class="column"> <a href="{{url}}">
{{label}}
</a>
</li>{{/children}}</ul>{{/children?}} {{/is_current}} {{/navigation}}</nav>
</header>
Your question doesn't really make sense, since HTML is fairly useless without some direction from styles. For example, the site you referenced uses this to accomplish their sticky header:
#top-header-container {
position: fixed;
top: 0;
margin: auto;
width: 100%;
z-index: 98;
background: rgba(255,255,255,0.75);
height: 70px;
}
You can use that same type of styling by embedding a style tag in your HTML page.
Related
I am relatively new to Sass so apologies if the answer to this question is straightforward. I am building a navbar component and would like to style the entire navbar (.main-header) when hovering over specific icons (.navbar-links and .navbar-title). So far, I have tried setting the .main-header element to a variable ($h: &) as well as using #at-root to no avail. Any and all suggestions would be much appreciated.
Example of the behavior I am looking for:
.navbar-links:hover
results in
.main-header{
background: red;
}
code:
<nav className='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li className='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
You can use pointer-events: none; at the header and set the children to pointer-events: auto; so you can manage it with hover like this:
.main-header {
pointer-events: none;
}
.main-header:hover {
background-color: red;
}
.navbar-item {
pointer-events: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav class='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li class='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
How do you change the text color for all navbar links including brand logo in Materialize css. I tries to add like 'black-text' but it only works for the brand-logo. For example,
<a id="logo-container" href="#" class="brand-logo black-text">
My Logo
</a>
<ul class="right hide-on-med-and-down black-text">
<li>Link 1
</li></ul>
Again 'black-text' only works for the logo.
In your css, add:
.black-text li a{
color: black;
}
alternately, you can add the "black-text" class directly to all the links you want to have black text.
example:
<ul class="right hide-on-med-and-down black-text">
<li><a class ="black-text" href=#">Link 1</a>
</li></ul>
I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g
This is my first "phonegap" application project, so done with the listview in html based on the requirement but listview is not properly formatted (ie one below the other), how to make the items to display one below the other. please help me.
here's my code for listview
<div>
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="images/c3.jpeg" align="left">
<h3>CONGRATULATIONS</h3>
</a>
</li>
<li><a href="#">
<img src="images/c2.jpeg" align="left">
<h3>HOLYDAY</h3>
</a>
</li>
<li><a href="#">
<img src="images/card1.jpeg" align="left">
<h3> I'M SORRY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c4.jpg" align="left">
<h3> HAPPY BIRTHDAY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c5.jpg" align="left">
<h3> MISSING U</h3>
</a>
</li>
<li><a href="#">
<img src="images/images.jpg" align="left">
<h3> ENGAGEMENT</h3>
</a>
</li>
![device output][1]
First of all you cannot use <br /> as direct ul child and secondly am sure you are using float: left; for the images which are inside li tag and thus it is spoiling the layout. Inorder to fix it, use the CSS property block below
ul.class_name li {
overflow: hidden;
/* Other styles goes here */
}
Just assign a class to ul element, replace the .class_name in CSS with the class you assigned to the ul element in your HTML.
Also, you can use the below declaration to self clear the parent element like
.clear:after {
display: table;
content: "";
clear: both;
}
This will self clear the parent element just like overflow: hidden; does, but in a better way.
I am using Twitter Bootstrap and I want to make a group of hidden fields inside a dropdown menu:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Export
<b class="caret bottom-up"></b>
</a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a id="downloadJsonButton">Link1</a></li>
<div id="downloadFormFilesDiv">
<li class="divider"></li>
<li><a id="downloadXformsButton">Link2</a></li>
<li><a id="downloadXmlButton">Link3</a><br /></li>
</div>
</ul>
</li>
However, links inside div element looks differently than those which are outside it. I want to make them look the same (links: 2 and 3 should look like link1). How can I accomplish it?
ul li{
width: 300px;
height: 70px;
background: #000;
color: white;
}
Now the menu is look the same to link content and to none content.
Try delete the div between <li> to <li>, you got iligal use with him.
Hope i helped..