I have two separate collapsible menu scripts I've implemented onto my website. With the second menu, a collapsible information display that has a arrow that rotates when the information menu is open, the arrow itself floats above everything else, even when the main drop down menu covers it. I have messed with the z-index of both items but can not figure out how to fix it. I have attached the relative code as well as photos of the problem area.
THIS IS MY CSS FOR MY MAIN HAMBURGER MENU AND THE BUTTON IN THE TOP LEFT CORNER
/* [ON BIG SCREENS] */
/* (A) WRAPPER */
#hamnav {
width: 100%;
background: #333333;
/* Optional */
top: 0;
position: fixed;
border-bottom: 1px solid #999999;
}
/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex;
z-index:100;
}
#hamitems a {
flex-grow: 1;
flex-basis: 0;
padding: 5px;
color: #D5DBDB;
text-decoration: none;
text-align: center;
font-size: 12px;
line-height: 20px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #666666;
font-family; Verdana;
z-index:100;
}
#hamitems a:hover {
background: #999999;
color: #D5DBDB;
}
/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }
/* [ON SMALL SCREENS] */
#media screen and (max-width: 768px){
/* (A) BREAK INTO VERTICAL MENU */
#hamitems a {
box-sizing: border-box;
display: block;
width: 100%;
border-top: 1px solid #999999;
font-family: Verdana;
z-index:100;
}
/* (B) SHOW HAMBURGER ICON */
#hamnav label {
display: inline-block;
color: #FFFFFF;
background: #333333;
font-style: normal;
font-size: 2.0em;
padding: 5px;
padding-left: 12px;
}
/* (C) TOGGLE SHOW/HIDE MENU */
#hamitems { display: none; }
#hamnav input:checked ~ #hamitems { display: block; }
}
/* [DOES NOT MATTER] */
html, body {
padding: 0;
margin: 0;
color: #FFFFFF;
background-color: #000000;
bgcolor: #000000;
}
THIS IS MY CSS FOR THE COLLAPSIBLE INFORMATION MENU WHICH DISPLAYS THE BULLET ABOVE THE FLOATING MAIN MENU WHEN I DROP IT. NOTHING ELSE FLOATS ABOVE THE MAIN MENUE.
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
margin: 10px 5px 20px 5px; }
.lbl-toggle {
display: block;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
padding: 1rem;
color: #DDD;
background: #000000;
cursor: pointer;
border-radius: 7px;
transition:
all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #FFF;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
max-height: 5000px;
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
background: #000000;
border-bottom: 1px solid #FFFFFF;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
}
.collapsible-content p {
margin-bottom: 0;
font-size: 15px;
font-family: Verdana;
margin-left: auto;
margin-right: auto;
text-align: justify;
line-height: 25px;
}
THIS IS THE MARKUP AS REQUESTED, THIS PRINTS THE COLLAPSIBLE INFORMATION MENU WITH THE TROUBLESOME BULLET POINT (CHECKBOX)
if (isset($v) && $v==1){
echo "<div class='wrap-collabsible'>";
echo "<input id='collapsible' class='toggle' type='checkbox'>";
echo "<label for='collapsible' class='lbl-toggle'>Alphabetical name jump</label>";
echo "<div class='collapsible-content'>";
echo "<div class='content-inner'>";
echo "<p>";
$sql = "SELECT user_id, username FROM user_reg ORDER BY username";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result, MYSQLI_NUM))
{
$id=$row[0];
$username=$row[1];
echo "<a href='#$id' class=block>$username</a>";
echo " ";
}
echo "</p>";
echo "</div>";
echo "</div>";
echo "</div>";
} // END IF V1
THIS IS THE HAMBURGER MENU WHICH IS ALLOWING THE TROUBLESOME BULLETPOINT TO BE DISPLAYED ABOVE IT
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor="#000000">
<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
<!-- (B) THE HAMBURGER -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- (C) MENU ITEMS -->
<div id="hamitems">
<a href=admin_panel.php?v=8>Unoff, Verif & Photo <?php echo "($total8)"; ?></a>
<a href=admin_panel.php>Offic, Verif <?php echo "($total)"; ?></a>
<a href=admin_panel.php?v=7>Unnoff, Verif, No Photo <?php echo "($total7)"; ?></a>
<a href=admin_panel.php?v=2>UnVerif <?php echo "($total2)"; ?></a>
<a href=admin_panel.php?v=1>Active <?php echo "($total1)"; ?></a>
<a href=admin_panel.php?v=3>Blocked <?php echo "($total3)"; ?></a>
<a href=admin_panel.php?v=4>Inactive <?php echo "($total4)"; ?></a>
<a href=admin_panel.php?v=5>Test Account</a>
<a href=admin_panel_orders.php>Orders <?php echo "($total6 new)"; ?></a>
<a href=admin_email_log.php?v=7>Remind Log</a>
<a href=admin_panel_polls.php>Poll #1 Log <?php echo "($total_poll votes)"; ?></a>
<a href=admin_messages.php>Contact Mess <?php echo "($total_mess new)"; ?></a>
<a href=admin_refer_friend_log.php>Refer FRND Log <?php echo "($total_log)"; ?></a>
<a href=admin-edit-store-items.php>Products <?php echo "($total_products out of stock)"; ?></a>
<a href=admin-create-coupon.php>Coupons <?php echo "($total_coup left)"; ?></a>
</div>
</nav>
I solved this issue using style="position: relative; z-index: 0;" for the elements that must appear below other elements. The elements that must appear on top should have z-index: 1;
For details check out the 3rd point in this article!
I'm making a wordpress template from scratch.
I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.
I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site
the following are my 4 files:
style.css
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* MAIN STYLE */
html {
font-size: 20px;
}
body {
}
#bodywrapper {
background: gray;
font-family: arial, sans-serif;
font-size: 5em;
}
header {
height:20em;
background: #000;
color: #fff;
margin: 0 auto;
}
#nav {
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
#nav ul li a{
padding: 1em;
text-align: center;
text-decoration:none;
}
#nav ul li a div{
height: 5em;
width: auto;
padding: 1em;
background-color: black;
}
#sandwichwrapper {
margin: 2em;
border: 1em solid black;
}
#sidebar {
float: right;
width: 15em;
margin: 2em;
border: 1em solid green;
}
#main {
float: right;
width: 15em;
margin: 2em;
border: 1em solid blue;
}
#comments{
clear: both;
margin: 2em;
border: 1em solid yellow;
}
#comment-form{
}
footer {
clear: both;
margin: 0 auto;
padding: 1em;
background: #000;
color: #fff;
}
/* BUNDLED STYLES */
header, footer{
width:100%;
margin:0 auto;
padding: 5em;
overflow:auto;
}
nav #sandwich {
width: 50em;
}
/* TEXT RULES */
h1 {
size: 10em;
color: green;
}
h2 {
size: 8em;
}
h3 {
size: 6em;
}
h4 {
size: 4em;
}
h5 {
size: 2em;
}
header.php
<!doctype html>
<html>
<head>
<title>The Logic Spot</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
header("Content-type: text/css");
</head>
<body>
<div id="bodywrapper">
<header>
<h1><?php bloginfo('name')?></h1>
</header>
<div id="nav">
<?php wp_nav_menu();?>
</div>
<div id="sandwichwrapper">
index.php
<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->
<?php get_sidebar()?>
<div id="main">
<?php while(have_posts()): the_post()?>
<h2><?php the_title()?></h2>
<p>By <?php echo get_the_author_link();?></p>
<?php the_content(__('Continue Reading'))?>
<?php endwhile?>
</div>
<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>
footer.php
</div> <!-- close div#sandwichwrapper-->
<footer>
<?=date('Y')?> Copyright
</footer>
</div> <!-- close div#bodywrapper-->
</body>
</html>
Add this line in the <head> tag
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Hey you need to specify absolute path to the stylesheets, for example
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />
Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.
My container, #topmenu is in fixed position. I just added a phone number (image) that I want to move with this bar, but it doesn't move with the fixed bar.
I've absolutely positioned it within a relatively positioned element, but it just doesn't stick.
If I just make the phone number position:fixed then it moves around with the viewport width. What's the best way to accomplish what I'm doing?
CSS fragment:
.topsocial a { margin-left: 15px; }
#topmenu {position:fixed; z-index:220; }
#topmenu .ktwrap {padding-top: 3px; padding-bottom: 3px; color: #fff;}
#topmenu ul li { display:inline; list-style-type: none; padding: 0px 10px 0 0; font-size: 13px; }
#topmenu .widget-container { margin-top: 5px;}
.topsocial .widget-containter {margin-top: 0px!important;}
#menu-menu li a span {
display:block;
line-height:14px;
margin-right: 4px;
text-transform: lowercase!important;
}
.menu-menu ul li a span {
line-height:14px;
margin-right: 4px;
text-transform: lowercase!important;
}
.topsocial {margin-top: 5px; color: #fff;}
.ktlogo {float: left; width: auto; margin-top:-35px; margin-left: 137px; font-family: 'HoneyScriptLight'; font-size: 60px; padding-top: 22px; }
.ktlogo img:hover {background: none;}
#navigationtop { font-size: 12px; color: #fff;}
#navigationtop ul li strong { display: block; padding-bottom: 7px; font-size: 14px; }
#navigationtop .ktwrap { padding-top: 60px; padding-bottom: 5px; height:71px; }
#floatnumber {
position: absolute;
top: -3px;
right: 150px;
z-index : 270;
}
PHP fragment:
<?php get_template_part( 'includes/template-parts/topbar' ); ?>
<?php } ?>
<?php
$disable_sidebar = of_get_option('disable_footer', '' );
if( $disable_sidebar['navbar']==0 ) { ?>
<div class="ktfullwidth" id="navigationtop">
<div class="ktwrap"> <div id="floatnumber"><img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660"></div>
<div class="ktlogo">
<?php
$disable_sidebar = of_get_option('disable_parts', '' );
if( $disable_sidebar['logo']==0 ) { ?>
<?php if ( of_get_option('logo') ) { ?>
<img src="<?php echo of_get_option('logo'); ?>" />
<?php } else { ?>
<a href="<?php echo home_url() ?>">
<?php if ( of_get_option('logotext') ) { ?>
<?php echo of_get_option('logotext', ''); ?></a>
<?php } else { ?>
Combined Effort</a>
<?php } ?>
<?php } ?>
<?php } ?>
</div>
You can change
<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul>
<div class="topsocial right">...</div>
into
<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul>
<div class="right">
<img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660">
<div class="topsocial right">...</div>
</div>
And then delete the othe image.
Without having read or tested your code in detail: If I got you right and you want to move the number with the bar then you have to put it within this fixed header. In the orignal code you can see that there are two overlapping headers and the number is NOT in the one with position fixed. Which there is
<div id="topmenu" class="ktfullwidth">
but in (and in your code seemingly as well)
<div class="ktfullwidth" id="navigationtop">
Put the number inside the #topmenu-div.
You might also be able to use position fied on the number itself, but i would recommend ot put it in the div.
Edit: I got confused by the names of the navigation-divs. I hope I got it right now.
This is for a Wordpress site powered by Thesis. What I'm trying to do is have a featured posts area filled with whichever posts I put in the featured/featured2 categories.
This is the PHP
function custom_featured_box() {
if(is_home()) {
?>
<div id="featuredbox" class="clearfix">
<?php $my_query = new WP_Query('category_name=featured&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;
?>
<div id="featuredbox-main" style="background: url(<?php the_post_thumbnail('featured') ?>) no-repeat;">
<?php the_title() ?>
</div>
<?php endwhile; ?>
<?php $my_query = new WP_Query('category_name=featured2&showposts=3');
while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;
?>
<div id="featuredbox-secondary">
<div class="secondary-item" style="width: 205px; background: url(<?php the_post_thumbnail() ?>) no-repeat;">
<?php the_title() ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
} }
The "new WP_Query" function is just calling the category "featured" and "featured2" (<-- this is for the secondary featured posts) and taking the first post (for the "featured" category) and first 3 (for the "featured2" category) and placing them in the featured posts section. The only problem I'm having is that the #featured-secondary isn't putting the "featured2" posts next to each other. Also the thumbnail images aren't displaying but I haven't bothered trying to figure that out yet.
Here is the CSS:
.custom #feature_box { padding:0em; }
.custom #featuredbox { padding: 8px 0 10px 0;}
.custom #featuredbox-main {overflow: hidden; width: 650px; height: 225px; border: solid
1px #ccc; margin: 0 0 10px 0; position: relative;}
.custom #featuredbox-main a:hover {text-decoration: underline;}
.custom #featuredbox-main a {z-index: 1; position: absolute; top: 121px; min-
height: 35px; left: 0; font-size: 20px; font-weight: bold; color: #fff; padding: 15px
10px; width: 100%; background: url(http://location-of-the-background-here);}
.custom #featuredbox-secondary {height: 162px; overflow: hidden; width: 650px;}
.custom .secondary-item {margin-right: 10px; position: relative; border: solid 1px
#ccc; height: 160px; float: left; overflow: hidden;}
.custom .secondary-item a:hover {text-decoration: underline;}
.custom .secondary-item a {z-index: 1; position: absolute; top: 52px; left: 0;
font-size: 12px; font-weight: bold; color: #fff; padding: 8px 10px; width: 185px;
background: url(http://location-of-the-background-here);}
I don't see why the CSS isn't making the #featuredbox-secondary posts to be placed next to each other.
Any help would be greatly appreciated.
P.S. here's a to screenshot of what it looks like with the current code, hopefully it helps people understand what I'm getting at. http://img43.imageshack.us/img43/3011/csshelp.jpg
If I understand you correctly, then you want every div with the class "secondary-item" which is inside the div with the ID "featuredbox-secondary" to float right next to each other? If so, you need to apply the float declaration to the class "secondary-item".
I am trying to float the timer right top across from the logo. but it's not working.
If I use the regular style="float:right" it works perfect...
<div id="whole_page" />
<div id="header" />
<?php echo "$logo" ?>
<div id="timer" style="float:right" /><?php
echo "$today";
?></div>
</div>
<div id="nav" />
Home |
About |
Help
</div>
<div id="content" />
<?php
echo "Hello, my name is, $first_name \"$nick_name\" $last_name<br />";
echo "I am from $city, $country<br />";
?>
</div>
</div>
This is the css:
#whole_page {
width: 65em;
margin: auto;
padding: 0;
text-align: left;
border-width: 0 1px 1px;
border-color: #000;
border-styler: solid;
}
#header {
color: white;
background: #ebebeb;
font-size: 24pt;
margin-bottom: 0;
font-weight: bold;
}
#timer {
float: right;
margin-bottom: 0;
}
#nav {
color: #000;
font-size: 12pt;
font-weight: none;
background: #ebebeb;
padding: 0.5em;
border: none;
Usually, for a float to work, you need to set a width on the element.
(Otherwise, the browser renders the element at 100% and there is nothing to float.)
So make this
#timer{
width:200px; //OR WHATEVER SIZE
float:right;
margin-bottom:0;
}
What happens when you use F12 debug? Do you see any style applied to the element? Also view the source code of of rendered page and see the actual CSS in the page. Then please post the necessary css from there to debug it.
Try to add to div header:
float:left;
If you want that a div to be in the next line just place:
clear: both;