Position:absolute - css
I have I have a div called logo. I want the logo to be on top of other areas and to overlap into the the preface top of a drupal site, the logo currently sits in the header area.
I looked up position absolute and I think that what I need to use but when I use position absolute the logo disappears, I can see it if I use position fixed, relative etc.
I thought the logo was being hidden because I was not using a z-index but even with that I cant see the logo.
What am I doing wrong?
#logo {
position: absolute;
top: 30px; /* 30 pixels from the top of the page */
left: 80px; /* 80 pixels from the left hand side */
z-index:1099;
border: 1px solid red; /* So we can see what is happening */
}
Also does anyone know of a really good free online css course?
Here is some additional information, namely the CSS and the page.tpl.php:
<?php
// $Id: page.tpl.php,v 1.1.2.5 2010/04/08 07:02:59 sociotech Exp $
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $setting_styles; ?>
<!--[if IE 8]>
<?php print $ie8_styles; ?>
<![endif]-->
<!--[if IE 7]>
<?php print $ie7_styles; ?>
<![endif]-->
<!--[if lte IE 6]>
<?php print $ie6_styles; ?>
<![endif]-->
<?php print $local_styles; ?>
<?php print $scripts; ?>
</head>
<body id="<?php print $body_id; ?>" class="<?php print $body_classes; ?>">
<div id="page" class="page">
<div id="page-inner" class="page-inner">
<div id="skip">
<?php print t('Skip to Main Content Area'); ?>
</div>
<!-- header-top row: width = grid_width -->
<?php print theme('grid_row', $header_top, 'header-top', 'full-width', $grid_width); ?>
<!-- header-group row: width = grid_width -->
<div id="header-group-wrapper" class="header-group-wrapper full-width">
<div id="header-group" class="header-group row <?php print $grid_width; ?>">
<div id="header-group-inner" class="header-group-inner inner clearfix">
<?php print theme('grid_block', theme('links', $secondary_links), 'secondary-menu'); ?>
<?php print theme('grid_block', $search_box, 'search-box'); ?>
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="header-site-info" class="header-site-info block">
<div id="header-site-info-inner" class="header-site-info-inner inner">
<?php if ($logo): ?>
<div id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</div>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div id="site-name-wrapper" class="clearfix">
<?php if ($site_name): ?>
<span id="site-name"><?php print $site_name; ?></span>
<?php endif; ?>
<?php if ($site_slogan): ?>
<span id="slogan"><?php print $site_slogan; ?></span>
<?php endif; ?>
</div><!-- /site-name-wrapper -->
<?php endif; ?>
</div><!-- /header-site-info-inner -->
</div><!-- /header-site-info -->
<?php endif; ?>
<?php print $header; ?>
<?php print theme('grid_block', $primary_links_tree, 'primary-menu'); ?>
</div><!-- /header-group-inner -->
</div><!-- /header-group -->
</div><!-- /header-group-wrapper -->
<!-- preface-top row: width = grid_width -->
<?php print theme('grid_row', $preface_top, 'preface-top', 'full-width', $grid_width); ?>
<!-- main row: width = grid_width -->
<div id="main-wrapper" class="main-wrapper full-width<?php if ($is_front) { print ' front'; } ?>">
<div id="main" class="main row <?php print $grid_width; ?>">
<div id="main-inner" class="main-inner inner clearfix">
<?php print theme('grid_row', $sidebar_first, 'sidebar-first', 'nested', $sidebar_first_width); ?>
<!-- main group: width = grid_width - sidebar_first_width -->
<div id="main-group" class="main-group row nested <?php print $main_group_width; ?>">
<div id="main-group-inner" class="main-group-inner inner">
<?php print theme('grid_row', $preface_bottom, 'preface-bottom', 'nested'); ?>
<div id="main-content" class="main-content row nested">
<div id="main-content-inner" class="main-content-inner inner">
<!-- content group: width = grid_width - (sidebar_first_width + sidebar_last_width) -->
<div id="content-group" class="content-group row nested <?php print $content_group_width; ?>">
<div id="content-group-inner" class="content-group-inner inner">
<?php print theme('grid_block', $breadcrumb, 'breadcrumbs'); ?>
<?php if ($content_top || $help || $messages): ?>
<div id="content-top" class="content-top row nested">
<div id="content-top-inner" class="content-top-inner inner">
<?php print theme('grid_block', $help, 'content-help'); ?>
<?php print theme('grid_block', $messages, 'content-messages'); ?>
<?php print $content_top; ?>
</div><!-- /content-top-inner -->
</div><!-- /content-top -->
<?php endif; ?>
<div id="content-region" class="content-region row nested">
<div id="content-region-inner" class="content-region-inner inner">
<a name="main-content-area" id="main-content-area"></a>
<?php print theme('grid_block', $tabs, 'content-tabs'); ?>
<div id="content-inner" class="content-inner block">
<div id="content-inner-inner" class="content-inner-inner inner">
<?php if ($title): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
<?php if ($content): ?>
<div id="content-content" class="content-content">
<?php print $content; ?>
<?php print $feed_icons; ?>
</div><!-- /content-content -->
<?php endif; ?>
</div><!-- /content-inner-inner -->
</div><!-- /content-inner -->
</div><!-- /content-region-inner -->
</div><!-- /content-region -->
<?php print theme('grid_row', $content_bottom, 'content-bottom', 'nested'); ?>
</div><!-- /content-group-inner -->
</div><!-- /content-group -->
<?php print theme('grid_row', $sidebar_last, 'sidebar-last', 'nested', $sidebar_last_width); ?>
</div><!-- /main-content-inner -->
</div><!-- /main-content -->
<?php print theme('grid_row', $postscript_top, 'postscript-top', 'nested'); ?>
</div><!-- /main-group-inner -->
</div><!-- /main-group -->
</div><!-- /main-inner -->
</div><!-- /main -->
</div><!-- /main-wrapper -->
<!-- postscript-bottom row: width = grid_width -->
<?php print theme('grid_row', $postscript_bottom, 'postscript-bottom', 'full-width', $grid_width); ?>
<!-- footer row: width = grid_width -->
<?php print theme('grid_row', $footer, 'footer', 'full-width', $grid_width); ?>
<!-- footer-message row: width = grid_width -->
<div id="footer-message-wrapper" class="footer-message-wrapper full-width">
<div id="footer-message" class="footer-message row <?php print $grid_width; ?>">
<div id="footer-message-inner" class="footer-message-inner inner clearfix">
<?php print theme('grid_block', $footer_message, 'footer-message-text'); ?>
</div><!-- /footer-message-inner -->
</div><!-- /footer-message -->
</div><!-- /footer-message-wrapper -->
</div><!-- /page-inner -->
</div><!-- /page -->
<?php print $closure; ?>
</body>
</html>
CSS
/* $Id: style.css,v 1.1.2.11 2010/07/02 22:11:04 sociotech Exp $ */
/* Margin, Padding, Border Resets
-------------------------------------------------------------- */
html, body, div, span, p,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, input, textarea {
margin: 0;
padding: 0;
}
img, abbr, acronym {
border: 0;
}
/* HTML Elements
-------------------------------------------------------------- */
p {
margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
}
h1 {
color: white !important;
text-shadow: black !important;
}
ul, ol, dd {
margin-bottom: 1.5em;
margin-left: 2em; /* LTR */
}
li ul, li ol {
margin-bottom: 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
}
a:link,
a:visited {
}
a:hover,
a:focus,
a:active {
text-decoration: underline;
}
blockquote {
}
hr {
height: 1px;
border: 1px solid gray;
}
/* tables */
table {
border-spacing: 0;
width: 100%;
}
tr.even td,
tr.odd td {
background-color: #FFFFFF;
border: 1px solid #dbdbdb;
}
caption {
text-align: left;
}
th {
margin: 0;
padding: 0 10px 0 0;
}
th.active img {
display: inline;
}
thead th {
padding-right: 10px;
}
td {
margin: 0;
padding: 3px;
}
/* Remove grid block styles from Drupal's table ".block" class */
td.block {
border: none;
float: none;
margin: 0;
}
/* Maintain light background/dark text on dragged table rows */
tr.drag td,
tr.drag-previous td {
background: #FFFFDD;
color: #000;
}
/* Accessibility
/-------------------------------------------------------------- */
/* skip-link to main content, hide offscreen */
#skip a,
#skip a:hover,
#skip a:visited {
height: 1px;
left: 0px;
overflow: hidden;
position: absolute;
top: -500px;
width: 1px;
}
/* make skip link visible when selected */
#skip a:active,
#skip a:focus {
background-color: #fff;
color: #000;
height: auto;
padding: 5px 10px;
position: absolute;
top: 0;
width: auto;
z-index: 99;
}
#skip a:hover {
text-decoration: none;
}
/* Helper Classes
/-------------------------------------------------------------- */
.hide {
display: none;
visibility: hidden;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
/* clear floats after an element */
/* (also in ie6-fixes.css, ie7-fixes.css) */
.clearfix:after,
.clearfix .inner:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
overflow: auto;
visibility: hidden;
}
/* Grid Layout Basics (specifics in 'gridnn_x.css')
-------------------------------------------------------------- */
/* center page and full rows: override this for left-aligned page */
.page,
.row {
margin: 0 auto;
}
/* fix layout/background display on floated elements */
.row,
.nested,
.block {
overflow: hidden;
}
/* full-width row wrapper */
div.full-width {
width: 100%;
}
/* float, un-center & expand nested rows */
.nested {
float: left; /* LTR */
margin: 0;
width: 100%;
}
/* allow Superfish menus to overflow */
#sidebar-first.nested,
#sidebar-last.nested,
div.superfish {
overflow: visible;
}
/* sidebar layouts */
.sidebars-both-first .content-group {
float: right; /* LTR */
}
.sidebars-both-last .sidebar-first {
float: right; /* LTR */
}
/* Grid Mask Overlay
-------------------------------------------------------------- */
#grid-mask-overlay {
display: none;
left: 0;
opacity: 0.75;
position: absolute;
top: 0;
width: 100%;
z-index: 997;
}
#grid-mask-overlay .row {
margin: 0 auto;
}
#grid-mask-overlay .block .inner {
background-color: #e3fffc;
outline: none;
}
.grid-mask #grid-mask-overlay {
display: block;
}
.grid-mask .block {
overflow: visible;
}
.grid-mask .block .inner {
outline: #f00 dashed 1px;
}
#grid-mask-toggle {
background-color: #777;
border: 2px outset #fff;
color: #fff;
cursor: pointer;
font-variant: small-caps;
font-weight: normal;
left: 0;
-moz-border-radius: 5px;
padding: 0 5px 2px 5px;
position: absolute;
text-align: center;
top: 22px;
-webkit-border-radius: 5px;
z-index: 998;
}
#grid-mask-toggle.grid-on {
border-style: inset;
font-weight: bold;
}
/* Site Info
-------------------------------------------------------------- */
#header-site-info {
width: auto;
}
#site-name-wrapper {
float: left; /* LTR */
}
#site-name,
#slogan {
display: block;
}
#site-name a:link,
#site-name a:visited,
#site-name a:hover,
#site-name a:active {
text-decoration: none;
}
#site-name a {
outline: 0;
}
/* Regions
-------------------------------------------------------------- */
/* Header Regions
-------------------------------------------------------------- */
#header-group {
overflow: visible;
}
/* Content Regions (Main)
-------------------------------------------------------------- */
.node-bottom {
margin: 1.5em 0 0 0;
}
/* Clear floats on regions
-------------------------------------------------------------- */
#header-top-wrapper,
#header-group-wrapper,
#preface-top-wrapper,
#main-wrapper,
#preface-bottom,
#content-top,
#content-region,
#content-bottom,
#postscript-top,
#postscript-bottom-wrapper,
#footer-wrapper,
#footer-message-wrapper {
clear: both;
}
/* Drupal Core
/-------------------------------------------------------------- */
/* Lists
/-------------------------------------------------------------- */
.item-list ul li {
margin: 0;
}
.block ul,
.block ol {
margin-left: 2em; /* LTR */
padding: 0;
}
.content-inner ul,
.content-inner ol {
margin-bottom: 1.5em;
}
.content-inner li ul,
.content-inner li ol {
margin-bottom: 0;
}
.block ul.links {
margin-left: 0; /* LTR */
}
/* Menus
/-------------------------------------------------------------- */
ul.menu li,
ul.links li {
margin: 0;
padding: 0;
}
/* Primary Menu
/-------------------------------------------------------------- */
/* use ID to override overflow: hidden for .block, dropdowns should always be visible */
#primary-menu {
overflow: visible;
}
/* remove left margin from primary menu list */
#primary-menu.block ul {
margin-left: 0; /* LTR */
}
/* remove bullets, float left */
.primary-menu ul li {
float: left; /* LTR */
list-style: none;
position: relative;
}
/* style links, and unlinked parent items (via Special Menu Items module) */
.primary-menu ul li a,
.primary-menu ul li .nolink {
display: block;
padding: 0.75em 1em;
text-decoration: none;
}
/* Add cursor style for unlinked parent menu items */
.primary-menu ul li .nolink {
cursor: default;
}
/* remove outline */
.primary-menu ul li:hover,
.primary-menu ul li.sfHover,
.primary-menu ul a:focus,
.primary-menu ul a:hover,
.primary-menu ul a:active {
outline: 0;
}
/* Secondary Menu
/-------------------------------------------------------------- */
.secondary-menu-inner ul.links {
margin-left: 0; /* LTR */
}
/* Skinr styles
/-------------------------------------------------------------- */
/* Skinr selectable helper classes */
.fusion-clear {
clear: both;
}
div.fusion-right {
float: right; /* LTR */
}
div.fusion-center {
float: none;
margin-left: auto;
margin-right: auto;
}
.fusion-center-content .inner {
text-align: center;
}
.fusion-center-content .inner ul.menu {
display: inline-block;
text-align: center;
}
/* required to override drupal core */
.fusion-center-content #user-login-form {
text-align: center;
}
.fusion-right-content .inner {
text-align: right; /* LTR */
}
/* required to override drupal core */
.fusion-right-content #user-login-form {
text-align: right; /* LTR */
}
/* Large, bold callout text style */
.fusion-callout .inner {
font-weight: bold;
}
/* Extra padding on block */
.fusion-padding .inner {
padding: 30px;
}
/* Adds 1px border and padding */
.fusion-border .inner {
border-width: 1px;
border-style: solid;
padding: 10px;
}
/* Single line menu with separators */
.fusion-inline-menu .inner ul.menu {
margin-left: 0; /* LTR */
}
.fusion-inline-menu .inner ul.menu li {
border-right-style: solid;
border-right-width: 1px;
display: inline;
margin: 0;
padding: 0;
white-space: nowrap;
}
.fusion-inline-menu .inner ul.menu li a {
padding: 0 8px 0 5px; /* LTR */
}
.fusion-inline-menu .inner ul li.last {
border: none;
}
/* Hide second level (and beyond) menu items */
.fusion-inline-menu .inner ul li.expanded ul {
display: none;
}
/* Multi-column menu style with bolded top level menu items */
.fusion-multicol-menu .inner ul {
margin-left: 0; /* LTR */
text-align: left; /* LTR */
}
.fusion-multicol-menu .inner ul li {
border-right: none;
display: block;
font-weight: bold;
}
.fusion-multicol-menu .inner ul li.last {
border-right: none;
}
.fusion-multicol-menu .inner ul li.last a {
padding-right: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded,
.fusion-multicol-menu .inner ul li.leaf {
float: left; /* LTR */
list-style-image: none;
margin-left: 50px; /* LTR */
}
.fusion-multicol-menu .inner ul.menu li.first {
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded li.leaf {
float: none;
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded ul {
display: block;
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded ul li {
border: none;
margin-left: 0; /* LTR */
text-align: left; /* LTR */
}
.fusion-multicol-menu .inner ul.menu li ul.menu li {
font-weight: normal;
}
/* Split list across multiple columns */
.fusion-2-col-list .inner .item-list ul li,
.fusion-2-col-list .inner ul.menu li {
float: left; /* LTR */
width: 50%;
}
.fusion-3-col-list .inner .item-list ul li,
.fusion-3-col-list .inner ul.menu li {
float: left; /* LTR */
width: 33%;
}
.fusion-2-col-list .inner .item-list ul.pager li,
.fusion-3-col-list .inner .item-list ul.pager li {
float: none;
width: auto;
}
/* List with bottom border
Fixes a common issue when list items have bottom borders and appear to be
doubled when nested lists end and begin. This removes the extra border-bottom
*/
.fusion-list-bottom-border .inner ul li {
list-style: none;
list-style-type: none;
list-style-image: none;
}
.fusion-list-bottom-border .inner ul li,
.fusion-list-bottom-border .view-content div.views-row {
padding: 0 0 0 10px; /* LTR */
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 216.7%; /* 26px */
}
.fusion-list-bottom-border .inner ul {
margin: 0;
}
.fusion-list-bottom-border .inner ul li ul {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.fusion-list-bottom-border .inner ul li ul li.last {
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: -1px;
margin-top: -1px;
}
#views_slideshow_singleframe_pager_slideshow-page_2 .pager-item {
display:block;
}
#views_slideshow_singleframe_pager_slideshow-page_2 {
position:absolute;
right:0;
top:0;
}
#header-group-wrapper {
background: none;
}
#page {
background-color:#F3F3F3;
background-image:url('/sites/all/themes/fusion/fusion_core/images/runswithgradient.jpg');
background-repeat:no-repeat;
background-attachment: fixed;
width: auto;
}
#views_slideshow_singleframe_pager_slideshow-page_2 div a img {
top:0px;
height:60px;
width:80px;
padding-right:10px;
padding-bottom:19px;
}
#mycontent{
width: 720px;
}
.product-body {
-moz-border-radius: 4px 4px 4px 4px;
margin: 0 0 20px;
overflow: hidden;
padding: 20px;
background: none repeat scroll 0 0 #F7F7F7;
border: 1px solid #000000;
border-style:solid;
border-width:thin;
color:#000000;
}
#product-details {
background: none repeat scroll 0 0 #F7F7F7 !important;
border: 1px solid #000000 !important;
color: #8E8E8E;
}
#logo {
position: relative;
top: 30px; /* 30 pixels from the top of the page */
left: 80px; /* 80 pixels from the left hand side */
z-index:1099;
border: 1px solid red; /* So we can see what is happening */
}
#breadcrumbs-inner {
background: none;
border-color: transparent;
border-style: none;
}
#block-views-new_products-block_1{
height:200px;
}
/* List with no bullet and extra padding
This is a common style for menus, which removes the bullet and adds more
vertical padding for a simple list style
*/
.fusion-list-vertical-spacing .inner ul,
.fusion-list-vertical-spacing div.views-row-first {
margin-left: 0;
margin-top: 10px;
}
.fusion-list-vertical-spacing .inner ul li,
.fusion-list-vertical-spacing div.views-row {
line-height: 133.3%; /* 16px/12px */
margin-bottom: 10px;
padding: 0;
}
.fusion-list-vertical-spacing .inner ul li {
list-style: none;
list-style-image: none;
list-style-type: none;
}
.fusion-list-vertical-spacing .inner ul li ul {
margin-left: 10px; /* LTR */
}
/* Bold all links */
.fusion-bold-links .inner a {
font-weight: bold;
}
/* Float imagefield images left and add margin */
.fusion-float-imagefield-left .field-type-filefield,
.fusion-float-imagefield-left .image-insert,
.fusion-float-imagefield-left .imagecache {
float: left; /* LTR */
margin: 0 15px 15px 0; /* LTR */
}
/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-left .views-row {
clear: left; /* LTR */
}
/* Float imagefield images right and add margin */
.fusion-float-imagefield-right .field-type-filefield,
.fusion-float-imagefield-right .image-insert
.fusion-float-imagefield-right .imagecache {
float: right; /* LTR */
margin: 0 0 15px 15px; /* LTR */
}
/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-right .views-row {
clear: right; /* LTR */
}
/* Superfish: all menus */
.sf-menu li {
list-style: none;
list-style-image: none;
list-style-type: none;
}
/* Superfish: vertical menus */
.superfish-vertical {
position: relative;
z-index: 9;
}
ul.sf-vertical {
background: #fafafa;
margin: 0;
width: 100%;
}
ul.sf-vertical li {
border-bottom: 1px solid #ccc;
font-weight: bold;
line-height: 200%; /* 24px */
padding: 0;
width: 100%;
}
ul.sf-vertical li a:link,
ul.sf-vertical li a:visited,
ul.sf-vertical li .nolink {
margin-left: 10px;
padding: 2px;
}
ul.sf-vertical li a:hover,
ul.sf-vertical li a.active {
text-decoration: underline;
}
ul.sf-vertical li ul {
background: #fafafa;
border-top: 1px solid #ccc;
margin-left: 0;
width: 150px;
}
ul.sf-vertical li ul li.last {
border-top: 1px solid #ccc;
margin-bottom: -1px;
margin-top: -1px;
}
ul.sf-vertical li ul {
border-top: none;
padding: 4px 0;
}
ul.sf-vertical li ul li {
border-bottom: none;
line-height: 150%; /* 24px */
More below but I can't paste that much
Thanks for the suggestion I've tried this
#header-group {
position: relative;
z-index: 9;
}
#logo {
position: abosolute;
top: 230px; /* 30 pixels from the top of the page */
left: 10px; /* 80 pixels from the left hand side */
z-index: 999;
}
but it's not working. I've taken a screen shot of the div to show the structure.
http://i.stack.imgur.com/ff4DP.png
position is always relative to the next parent with an explicitly set position
If your logo is disappearing, it's probably because your header doesn't at least have position:relative set, or something similar occurring. Using Firebug or Chrome's inspect, can you see where the logo is?
Post your HTML, and CSS for the header/body, and we'll get to the bottom of it!
This does not fully answer your question, but as an aside, one thing I've learned since looking at CSS in the past couple weeks is that z-index only works on attributes with a position tag. In other words, in your case it's meaningless since it needs something to compare to. Adding a position: relative and a z-index to whatever is holding #logo should help.
Related
Header cut off on mobile devices
The header is being cut off on mobile devices, this is causing the top of the logo to be cut off. The issue occurs on this website: http://development.blackcountrydesigns.co.uk
I am building a custom theme for the website. This issue does not appear when inspected in browser tools, only when actually viewing on a mobile device. Tested on an iPhone 6 and Sony Xperia XZ1.
Here is my header.php file:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=0'>
<title><?php echo get_bloginfo('name'); ?> | <?php echo get_the_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class='bravo-logo'>
<?php if(function_exists('the_custom_logo') && has_custom_logo()) {
the_custom_logo();
} else { ?>
<a href='<?php get_bloginfo('wpurl'); ?>'><?php echo get_bloginfo('name'); ?></a>
<?php } ?>
</div>
<div class='bravo-main-menu bravo-menu'>
<?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
</div>
<div class='bravo-mobile-menu'>
<i class='fas fa-bars fa-2x' id='bravo-hamburger'></i>
</div>
</header>
<div class='bravo-vertical-nav'>
<?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
</div>
Here is all of the relevant CSS for my header - please note there are approximately 600 lines of CSS so I have just stripped the file and only included CSS that is relevant to the site header:
/* Global/General Styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
background-color: #eee;
color: #4d4d4d;
font-family: 'Montserrat', sans-serif;
}
body {
padding-bottom: 270px;
position: relative;
min-height: 100vh;
}
/* Header */
header {
min-height: 150px;
display: flex;
align-items: center;
border-bottom: 3px solid #1abc9c;
background-color: #fff;
}
/* Logo */
div.bravo-logo {
padding: 1rem;
margin-left: 1.5rem;
}
div.bravo-logo img {
height: 100px;
width: auto;
}
#media only screen and (max-width: 450px) {
div.bravo-logo img {
width: 90%;
height: auto;
}
}
div.bravo-logo a {
text-decoration: none;
font-size: 1.5rem;
color: #4d4d4d;
}
/* Menus */
div.bravo-menu ul {
list-style-type: none;
}
div.bravo-menu ul li {
display: inline-block;
}
div.bravo-main-menu {
align-self: flex-end;
width: 100%;
margin-right: 3.5rem;
}
div.bravo-main-menu ul {
float: right;
}
div.bravo-main-menu ul li a {
display: block;
padding: .5rem .75rem;
text-decoration: none;
color: #4d4d4d;
font-size: 1.5rem;
font-weight: 200;
letter-spacing: .15rem;
transition: .3s;
}
div.bravo-main-menu li.current-menu-item a {
font-weight: bold;
}
div.bravo-main-menu ul li a:hover {
background-color: #1abc9c;
color: #fff;
}
div.bravo-mobile-menu {
display: none;
margin-right: 1.75rem;
}
div.bravo-mobile-menu i {
cursor: pointer;
}
div.bravo-vertical-nav {
display: none;
}
div.bravo-vertical-nav ul {
list-style-type: none;
}
div.bravo-vertical-nav ul li {
text-align: center;
cursor: pointer;
padding: .85rem 0;
background-color: #eee;
border-bottom: 2px solid #1abc9c;
}
div.bravo-vertical-nav ul li a {
text-decoration: none;
color: #1abc9c;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: .1rem;
}
#media only screen and (max-width: 1160px) {
header {
justify-content: space-between;
}
div.bravo-main-menu {
display: none;
}
div.bravo-mobile-menu {
display: block;
}
}
#media only screen and (max-width: 1070px) {
body {
padding-bottom: 570px;
}
header {
margin-top: -32px !important;
}
div#wpadminbar {
display: none !important;
}
}
#media only screen and (max-width: 782px) {
header {
margin-top: -46px !important;
}
}
The negative margin top that I've set on two breakpoints is to get rid of the space left when hiding the admin bar - I have tried with and without these values and neither has seemed to make a difference. I have tried adjusting the padding on the header and logo containers, but I'm struggling as I can't seem to replicate the errors within my desktop browser.
Please see below a screenshot of the issue:
It's caused by bravo.css?ver=0.0.1, line 483:
#media only screen and (max-width: 782px) {
header {
margin-top: -46px !important;
}
}
... which overrides the rule set at line 456 (same file):
#media only screen and (max-width: 1070px) {
header {
margin-top: -32px !important;
}
}
You probably want to set a different value for that margin-top. -10px looks like a good candidate.
You are doing something wrong when hiding admin bar, you don't need that negative margin-top, leave it at 0. Install "remove admin bar" plugin or add add_filter(‘show_admin_bar’, ‘__return_false’); to functions.php for properly hiding it when logged in.
Vertically centering wp_nav_menu in site-header
how can I vertically center det wordpress function wp_nav_menu in my site header? I have used the learnWebCode menu tutorial link: https://www.youtube.com/watch?v=AShql_Ap1Yo&t=568s
I have managed to float it left as i want but having a problem implementing it in to my site-header. Does any one have a soulution?
<!-- site header -->
<header class="site-header">
<div class=container3>
<h1 class="logo-title"><?php bloginfo('name'); ?></h1>
</div>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu( $args ); ?>
</nav>
</header><!-- site header -->
This is my css
/*Navigation Menus*/
.site-nav ul{
margin: 0px;
text-align: center;
display:inline-block;
float: right;
width: auto;
}
.site-nav li{
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
.site-nav ul:before, .site-nav ul:after {
content ""; display: table;
}
.site-nav ul:after {
clear: both;
}
.site-nav ul li {
list-style: none;
float: right;
text-align: center;
}
/* Site Header Menu */
.site-header nav ul li a:link,
.site-header nav ul li a:visited {
display: block;
padding: 10px 20px;
}
You can use jquery to set vertically center the menu. Use this logic
var a = jQuery(".site-header").height();
var b = jQuery("nav").height();
var c = (a-b)/2;
jQuery("nav").css("padding-top" , c );
My site's fluid grid not working in IE11
I've created a site via Dreamweaver, and it's supposed to be responsive. When I tested in Chrome and Firefox, it's working fine, but when I tested it in IE11, it's not working as well as expected. For some reason, IE11 is having trouble adjusting the text. The layout is sort of like this:
There's a parent div with two child divs (one for image and another for text). Depending on the row position, the image will either be on the right or left and is set to take 50% of the width.
The max width of the grid container is 1280px and each image, with the exception of the banner is 640 x 800.
I've left the fluid grid CSS mostly default (in Dreamweaver). I've made two versions of the page (index and index2) and both have the same problem.
Here's the div in index
<div class="over480">
<!-- Technology Section -->
<div class="divHomeContent" id="fhTech">
<div class="hcImg1">
<img src="images/thumbs/tech_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
<span class="spnCont">Developing the next generation products for control systems and power supply</span>
</div>
</div>
<!-- End Technology Section -->
<!-- Project Engineering Section -->
<div class="divHomeContent" id="fhPE">
<div class="hcTxt2">
Delivering world-class engineering solutions through power generation expertise.
</div>
<div class="hcImg2">
<img src="images/thumbs/pe_btn.jpg" alt="" border="0"/>
</div>
</div>
<!-- End Project Engineering Section -->
<!-- Marketing & Sales Support Section -->
<div class="divHomeContent" id="fhMkt">
<div class="hcImg1">
<img src="images/thumbs/ms_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
Enhancing Product awareness across the region and help sales win through effective customer engagement.
</div>
</div>
<!-- End Marketing & Sales Support Section -->
<!-- Supply Chain Section -->
<div class="divHomeContent" id="fhSC">
<div class="hcTxt2">
The Control Tower - ensuring delivery of products whenever and wherever customers need them.
</div>
<div class="hcImg2">
<img src="images/thumbs/sc_btn.jpg" alt="" border="0"/>
</div>
</div>
<!-- End Supply Chain Section -->
<!-- Lifecycle Services Section -->
<div class="divHomeContent" id="fhLS">
<div class="hcImg1">
<img src="images/thumbs/ls_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
Best-In-Class technical support and services that solve our customers’ toughest problems.
</div>
</div>
<!-- End Lifecycle Services Section -->
And here are the CSS codes:
/*
/*
* HTML5 ✰ Boilerplate v3.0.2
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background-color: #e5e5e5; font-family: Arial; color: #595858; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
/*
* 'border-collapse: collapse;' needs to be overridden in designs having tables with rounded corners and drop shadows.
*/
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/* =============================================================================
Extra Styles
========================================================================== */
.gridContainer {
background-color: #fff;
}
footer {
color: #909090;
margin-top: 60px;
}
.divExtras .ex-ico {
/*width: 50px;
height: 50px;*/
margin-left: auto;
margin-right: auto;
}
.divExtras {
width: 100%;
color: #fff;
padding-top: 40px;
text-align: center;
}
.divExtras td {
width: 20%;
text-align: center;
padding: 10px;
}
.divC001 {
/*display: table;*/
width: inherit;
border: 0px solid black;
position: relative;
}
.divC002 {
/*display: table;*/
width: inherit;
border: 0px solid red;
position: relative;
}
.imgHome {
position: relative;
}
#divH002 {
z-index: 0;
}
/*#fhTech .hcImg1 {
position: relative;
top: -30px;
z-index: 1;
}
#fhPE .hcImg2 {
position: relative;
top: -60px;
z-index: 2;
}
#fhMkt .hcImg1 {
position: relative;
top: -90px;
z-index: 3;
}
#fhSC .hcImg2 {
position: relative;
top: -120px;
z-index: 4;
}
#fhLS .hcImg1 {
position: relative;
top: -150px;
z-index: 5;
}*/
.divExtras {
font-size: 0.9em;
}
.divHomeContent {
border: none;
clear:both;
display: flex;
overflow: hidden;
max-width: 1280px;
flex-flow: row;
}
.divHomeContent div.hcImg1 {
float: left;
width: 50%;
border: none;
max-width: 640px;
}
.divHomeContent div.hcTxt1 {
padding-left: 50px;
padding-right: 20px;
border: none;
max-width: 570px;
overflow: hidden;
flex: 1;
height: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.divHomeContent div.hcImg2 {
width: 50%;
border: none;
overflow: hidden;
max-width: 640px;
}
.divHomeContent div.hcTxt2 {
padding-left: 20px;
padding-right: 50px;
border: none;
float: left;
width: 100%;
max-width: 570px;
flex: 1;
word-wrap: break-word;
height: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.spnCont {
display: inline-block;
vertical-align: middle;
}
In Firefox and Chrome, the responsive design is working as expected: The texts vertically align, and the word wrap adjusts great, so the two child divs are side-by-side.
However in IE11, the texts remain vertically at the top and the divs whose text part is on the left don't seem to wrap their text and seem to go beyond the max width I set. As a result, the right-had div, which houses the image, goes to the bottom.
Please help :(
I can see that you're using Flexbox displays, which has been known to have issues with IE11 (and Internet Explorer in general) I would strongly suggest, if you want all browser support - To utilize another grid system such as Bootstrap or alternatively if you wanted something more light weight, you could go for something like Toast Grid You can check browser compatibility using a website called CanIUse - It's very handy for checking cross-browser compatibility and even provides alternative resources that you can use!
Ok, so now I found out what was happening. For some reason, my IE11 was rendering the page I was working with using IE7 compatibility. I just added this meta () and everything is now working!
Third level of CSS dropdown menu does not work
I have a 2-level CSS dropmenu menu working nicely - taken from the web.
I'm pretty new to CSS and tried to mod it to work with 3-levels but unfortunately I failed...
Screen shot of my 3rd level menu fail:
http://i1280.photobucket.com/albums/a498/paul1234562/menu-screen_zpsb180cdfa.jpg
Update: note the third-level menu is supposed to display to the right of its parent menu, not over it and the other sub-menus.
You can see the menu here:
http://etfsage.ca/test/
Under 'Canada Equity', I wanted the 'Broad Market' submenu to display the third level menu options when the mouse hovers over 'Broad Market'.
If some CSS Guru could help me get this working I would hugely appreciate it.
The HTML code is:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="robots" content="noindex, follow">
<meta name="description" content="">
<meta charset="UTF-8">
<title>Test Menu</title>
</head>
<body>
<!-- Display Main Menu !-->
<nav class="cf">
<nav class="cf">
<!-- menu nav -->
<ul class="topmenu">
<!-- Home -->
<li class="topmenu">Home</li>
<!-- Canada Equity ETF -->
<li class="topmenu">Canada Equity <img src="/etf-images/down-arrow.jpg">
<ul class="submenu">
<li>Broad Market</li>
<ul class="sub-submenu">
<li> +++Third level menu option #1</li>
<li>+++Third level menu option #2</li>
<li>+++Third level menu option #3</li>
</ul>
<li>Sector Specific</li>
<li>REITs (Real Estate Investment Trusts)</li>
<li>Mid-Cap and/or Small-Cap</li>
<li>Minimum Volatility</li>
</ul>
</li>
<!-- USA Equity ETF -->
<li class="topmenu">USA Equity <img src="/etf-images/down-arrow.jpg">
<ul class="submenu">
<li>Broad Market</li>
<li>NASDAQ</li>
<li>Small Cap</li>
<li>Sector Specific</li>
<li>Minimum Volatility</li>
<li>High Beta</li>
<li>Actively Managed: USA Equity</li>
</ul>
</li>
</ul>
</nav>
</nav>
</body>
</html>
The CSS code is:
#charset "utf-8";
/* CSS Document */
html {
background: #E6E3D4;
}
body {
font: 100% Georgia, "Times New Roman", Times, serif;
line-height: 1.2; /* */
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
ul.topmenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #006da6;
height: 2em;
width: 100%;
font: 100% Georgia, "Times New Roman", Times, serif;
font-size: 0.95em;
}
li.topmenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
/* ul.sub-submenu defined - newly added as part of my third level menu mod */
/* ul.submenu defined - works great */
/* ul.topmenu defined - great great */
ul.sub-submenu, ul.submenu, ul.topmenu li a {
display: block;
line-height: 1.8em;
padding: 0 1em;
color: white;
text-decoration: none;
z-index:3;
}
ul.topmenu li a:hover, ul.topmenu li:hover > a {
background: #035c7c;
height: 1.8em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
text-decoration: none;
}
ul.current, a:hover.current, ul.topmenu li:hover a.current {
background: #AD9B7F;
background: yellow;
color: #eee;
padding-top: .3em;
border-radius: .3em .3em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #917F63;
cursor: default;
}
ul.topmenu li:hover ul {
left: 0;
}
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
ul.submenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 1.8em;
width: 100%;
float: none;
background: #035c7c;
background: pink;
width: auto;
height: auto;
position: absolute;
top: 1.8em;
left: -9000em;
}
ul.submenu li {
float: none;
}
ul.submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li a:hover {
background: #15afcb;
background: red;
height: 1.8em;
padding-top: .2em;
top: 0;
border-radius: 0;
text-decoration: none;
}
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
ul.sub-submenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 1.8em;
width: 100%;
float: none;
background: #035c7c;
width: auto;
height: auto;
position: absolute;
top: 1.8em;
left: -9000em;
}
ul.sub-submenu li {
float: none;
}
ul.sub-submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.sub-submenu li:last-child a {
border-bottom: none;
}
ul.sub-submenu li a:hover {
background: #15afcb;
background: brown;
height: 1.8em;
padding-top: .2em;
top: 0;
border-radius: 0;
text-decoration: none;
}
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
I believe this is not possible with pure CSS... See here. You can't reference CSS elements through CSS. What you can do though is use Javascript and dynamically apply the styling needed. For your scenario, I set display: none to your class sub-submenu and then added a JS script so that on hover, it would find any uls inside and show them. I also moved your sub-submenu into the li. Working jsFiddle here: http://jsfiddle.net/8kvcN/1/
Easiest way is using jQuery rather than css do the interaction.
You can see the DEMO here.
Here is the code of jQuery.
$('.submenu li a:first').hover(function(){
$('.sub-submenu').show();
},
function(){
$('.sub-submenu').hide();
});
equivalent tr of CSS?
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element