I'm trying to create a sidebar with links on a wordpress page.
Screenshot:
http://imgur.com/CgVJTS8
HTML for sidebar:
<div class="right">
<ul style="list-style-type:none;">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
CSS:
.right{ position: absolute; top: 400px; right:980px; bottom: 80px;}
Basically it just doesn't treat the links as links. It's like the element is disabled. All I can do is see the element. I think it's behind something...not sure. I've played around with th eposition and I can get it to work if I make it relative but then it messes up the location of the sidebar.
Also: I know there are more effective ways of doing this, but I am a student with restricted access to the admin panel of this wordpress site so I'm just trying to do what I can with what I can.
Thank you for any advice/wisdom!
UPDATE: Works in IE just not Chrome...wtf
"I think it's behind something...not sure"
Try to add z-index: 1000; (or higher) and width: 400px;.
z-index will move the absolute element on top of other elements. Sort of like layers.
Example
.right {
z-index: 1000;
width: 400px;
}
Related
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>
I have seen a number of websites where, if I connect from a mobile device, the navigation bar automatically changes to a drop-down menu. This prevents the navigation bar being displayed too small, or off he side of the screen, or on two rows instead of one.
Now, the drop-down menu always seems to be a button with three horizontal lines on it, and feels very consistent across diffferent websites with this feature. For this reason, I'm wondering whether this is some built-in feature in CSS which automatically converts the navigation at into a drop-down menu, when appropriate. If so, could somebody point me towards info on how I might be able to incorporate this into my own website?
Thanks.
you have add media query for this
HTML
<img class="show-menu" src="http://localhost/wp-content/themes/themename/images/menu.png" alt="">
<nav class="main-nav">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li >menu1</li>
<li><a href="#>menu1</a></li>
<li >menu1</li>
<li>menu1</li>
<li>menu1</li>
<li >menu1</li>
</ul></div>
</nav>
Media Query CSS
#media(max-width:640px){
.show-menu {
display: block;
}
.main-nav {
left: 0;
padding-top: 15px;
position: absolute;
top: 10px;
width: 100%;
}
.menu-primary-menu-container {
display: none;
}
.main-nav:hover .menu-primary-menu-container {
display: block;
}
}
#media(min-width:641px){
.show-menu {
display: none;
}
}
It is call "habmubrger menu".
It is combination of CSS and JS.
You can find it http://getbootstrap.com/ .
Or you can build it yourself. It is simple
Also check media queries
I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
I'm a little new to web programming and have looked far and wide trying to fix this problem on my own but for the life of me I cannot figure it out, I greatly appreciate any and all help.
I'm basically making a navigation bar and I attempt to have it link to my other html pages but it's not working. I use the following code.
HTML
<header>
<div class="banner"> <!-- contains main banner and logo -->
<a href="index.html" id="logo">
<img src="images/newlogo.png" alt="blahblah">
</a>
</div>
<div id="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
border-top: 12px solid #9e2630;
width: 100%;
background: #fff;
left: 0;
top: 0;
z-index: 200;
height: 115px;
margin-bottom: 130px;
}
header #logo img {
padding-top: 35px;
display: block;
margin-left: auto;
margin-right: auto;
}
header ul {
float: left;
position:relative;
left:50%;
min-height: 60px;
margin-top: 30px;
}
header ul li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position:relative;
left:-50%;
/*height: 45px;*/
}
header ul li a {
font: normal normal normal 18px/20px 'Century Gothic', sans-serif;
text-align: center;
color: #9e2630;
/*height: 43px;*/
}
header .nav li a:hover{
background-color: #9e2630; color:#FFFFFF;
}
header ul li a.current{
background-color: #9e2630; color:#FFFFFF;
}
The link in the logo works fine. The link in the contact also work fine, there's no problem when I link to an element on the page. The other four links do not work. I've also tried setting the href to an "http" address but that didn't work either. I've run all of these tests in DreamWeaver's browser preview function (IE and Chrome) as well as on a remote server with no difference in results.
I also noticed the z-index in the header is set to 200 (this is sample code I'm working with) which I understand plays a role in how elements are layered. I tried fiddling with that to no avail. What do you guys think?
Edit1: here's what my file structure looks like
file structure
Also here's the template I've been using
template
Edit2: Ok guys I found the problem was a JS file called jquery.singlePageNav.min.js
unfortunately when I disable this file I lose the nice image slider I had on my web page but the links work again, so now I have to fix that :p
Thanks for your help everybody!
From the plugin's documentation, by default it will override all links, which is clearly not what you want here. However there is a filter option which can override this behavior:
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
Therefore I suggest adding a class to all the links you don't want to be single-page-nav-ized, then initializing with the filter option:
HTML
<header>
<div class="banner"> <!-- contains main banner and logo -->
<a href="index.html" id="logo">
<img src="images/newlogo.png" alt="blahblah">
</a>
</div>
<div id="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
JavaScript
$(document).singlePageNav({filter: ':not(.external)'});
Give proper path to your pages
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
be sure that all your .html pages in the correct folder. As for now you are linking to html pages in the same folder, so if you dont have them there , you wont be able to open them like this. you have to navigate to the other links from your index.html. Ill explain: if you have a folder "sites" and you have all your .html documents there, it should work the way you did. BUT if in your folder "sites" you only have your index.html and the other sites are in a subfolder "sub-sites" you will have to navigate there first. As posted in answer no. 1
I have this code:
<header>
<div id="title">
<img alt="logo" src="/Content/logo.gif" />
</div>
<nav>
<ul id="menu">
<li>Products</li>
<li>Auctions</li>
<li>Segmentation</li>
</ul>
</nav>
</header>
That generate this:
I want that the image will be above the white box(that it will align according to the image). How do I do it?
BTW I use the default asp.net mvc3 template.
Thanks.
I'm assuming you're floating these elements. If so, try setting the overflow property of the header:
header {
overflow: auto
}
If you want it to place 100px above it's natural positon, use this.
#title img {
margin-top: 100px
}
or this:
#title img {
position: relative;
top: 100px;
}
If you're testing this in Internet Explorer < 9, make sure you're defining the tag <header> using
<script type='text/javascript'>document.createElement('header')</script>
or a library and styling it as a block-level element (header{display:block}) before trying to style it.