I was wondering how I can achieve an effect similar to this website. When you scroll down the site the logo disappears but the menu remains fixed:
http://www.nowness.com/
This is my site: http://www.itsalifestylething.co.uk/quick-cupcake-catch-up/
PHP
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><img src="http://www.itsalifestylething.co.uk/wp-content/uploads/2013/11/logo-large.png" /></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
CSS
/* Header
------------------------------------------------------------ */
.site-header {
padding: 5px 0 !important;
}
hgroup {
width: 100%;
}
#masthead {
width: 960px;
margin: 0 auto;
position: relative;
}
h1.site-title {
margin: 0 auto;
width: 480px;
height: 123px;
}
.social img {
margin-right: 15px;
}
/* Nav
------------------------------------------------------------ */
.main-navigation {
width: 100%;
margin: 0px !important;
}
.main-navigation div.nav-menu > ul {
border: 0px !important;
margin: 0 auto;
width: 430px;
}
.main-navigation li {
margin: 0 25px 0 0;
}
.main-navigation li ul {
padding-top: 2px;
z-index: 10;
}
.main-navigation li a:hover, .main-navigation .current_page_item > a {
color: #33d898;
font-weight: normal;
}
.main-navigation li ul {
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
width: 200px;
}
.main-navigation li ul li a {
background: #ffffff;
border-bottom: 1px solid #e7e7e7
}
.main-navigation li ul li a:hover {
background: #ffffff;
color: #33d898;
}
.nav-menu {
border-bottom: 1px solid #e7e7e7;
}
This is how I would go about it with html, css, and jQuery.
First this is how I would order my html,
<nav>
<span class="logo">Your Logo</span>
<ul>
<li id="logo">Your Logo</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Next the css,
html, body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav {
width: 80%;
background: #c1c1c1;
position: fixed;
top: 0;
left: 50%;
margin-left: -40%;
}
nav li {
display: inline-block;
cursor: pointer;
}
#logo {
display: none;
}
#logo.scroll {
display: inline-block;
}
.logo {
font-size: 50px;
font-family: "century gothic";
}
and finally the little bit of jQuery,
$(window).scroll(function() {
$('.logo').hide();
$('#logo').addClass('scroll');
if ($(window).scrollTop() === 0) {
$('.logo').show();
$('#logo').removeClass('scroll');
}
});
Here is a jsfiddle, Link.
You have to use javascript to add a position: fixed to your header. Also you need to give your body an offset.
nav-menu-static {
position: fixed;
top: 0;
background: #fff;
width:960px
}
#masthead {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
position: fixed;
width: 960px;
}
Then set the margin-top for the .site-content class
Related
I have a project which I should finish until tomorrow but I have a problem.
When I resize the browser(smaller), primary-menu disappears and appears an empty element with a name nav-toggle. Even when I removed that nav-toggle, the primary menu is not displayable.
this is my php code
<div class="header-wrapper">
<div class="header">
<div class="section-inner">
<?php if ( get_theme_mod( 'rowling_logo' ) ) : ?>
<a class="blog-logo" href='<?php echo esc_url( home_url('/') ); ?>' title='<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> — <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>' rel='home'>
<img src='<?php echo esc_url( get_theme_mod( 'rowling_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'title' ) ); ?>'>
</a>
<?php elseif ( get_bloginfo( 'description' ) || get_bloginfo( 'title' ) ) : ?>
<h2 class="blog-title">
<?php echo esc_attr( get_bloginfo( 'title' ) ); ?>
</h2>
<?php if ( get_bloginfo( 'description' ) ) : ?>
<h4 class="blog-description">
<?php bloginfo('description'); ?>
</h4>
<?php endif; ?>
<?php endif; ?>
<div class="nav-toggle">
<div class="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div> <!-- /nav-toggle -->
</div> <!-- /section-inner -->
</div> <!-- /header -->
<div class="navigation">
<div class="section-inner">
<ul class="primary-menu">
<?php if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu( array(
'container' => '',
'items_wrap' => '%3$s',
'theme_location' => 'primary'
) ); } else {
wp_list_categories( array(
'container' => '',
'title_li' => ''
));
wp_list_pages( array(
'container' => '',
'title_li' => ''
));
} ?>
</ul>
<div class="clear"></div>
</div>
</div> <!-- /navigation -->
<ul class="mobile-menu">
<?php
?>
</ul> <!-- /mobile-menu -->
</div> <!-- /header-wrapper -->
this is some css code for primary-menu class
.primary-menu { display: none; }
.primary-menu ul ul {
padding-top: 0;
top: 10px;
}
.primary-menu ul ul li { background: #333; }
.primary-menu ul ul .menu-item-has-children:hover::after { border-left-
color: #333; }
.primary-menu ul ul ul li { background: #444; }
.primary-menu ul ul ul .menu-item-has-children:hover::after { border-left-
color: #444; }
.primary-menu ul ul ul ul li { background: #555; }
.primary-menu ul ul ul ul .menu-item-has-children:hover::after { border-
left- color: #555; }
.primary-menu ul ul ul ul ul li { background: #666; }
.primary-menu ul ul ul ul ul .menu-item-has-children:hover::after { border-
left-color: #666; }
.primary-menu li > ul > li:hover > ul {
opacity: 1;
top: 0;
left: 220px;
margin-left: 0;
}
.navigation .section-inner { background-color: #C0C0C0; }
.primary-menu { font-size: 0.8rem; }
.primary-menu > li {
float: left;
border-right: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(255,255,255,0.1);
}
.primary-menu > li:last-child:after {
content: "";
display: block;
border-right: 1px solid rgba(255,255,255,0.1);
position: absolute;
top: 0;
right: -2px;
bottom: 0;
}
.primary-menu > li > a {
display: block;
padding: 20px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.primary-menu > li.menu-item-has-children > a { padding-right: 34px; }
.primary-menu > li.menu-item-has-children:before,
.primary-menu > li.menu-item-has-children:after {
content: "";
display: block;
border: 4px solid transparent;
border-top-color: #fff;
position: absolute;
top: 50%;
margin-top: -3px;
right: 20px;
}
.primary-menu > li.menu-item-has-children:before {
border-top-color: rgba(0,0,0,0.25);
margin-top: -2px;
}
.primary-menu > li:hover > a {
background: rgba(255,255,255,0.1);
color: #fff;
}
.primary-menu > li.current_menu_item > a {
background: #fff;
border: none;
color: #333;
}
Please anybody can help me how should I do if I want to show the menu even the browser is resized?
I have Wordpress pages looking like this: Page 1 | Page 2 | Page 3 |
I don't want a border-right on Page 3. How can I delete it?
.primary-navigation {
float: left;
}
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation .menu-item-has-children a {
padding-right: 35px
}
<div id="primary-navigation" class="primary-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation" class="navigation clearfix mobile-menu-wrapper">
<a href="#" id="pull" class="toggle-mobile-menu">
<?php _e( 'Menu'); ?>
</a>
<?php if (has_nav_menu( 'primary-menu')) { ?>
<?php wp_nav_menu(array( 'theme_location'=>'primary-menu', 'menu_class' => 'menu clearfix', 'menu_id' => 'menu-primary-menu', 'container' => '', 'walker' => new mts_menu_walker)); ?>
<?php } else { ?>
<ul class="menu clearfix" id="menu-primary-menu">
<?php wp_list_pages( 'title_li='); ?>
</ul>
<?php } ?>
</nav>
</div>
Use the :last-child pseudo-class to set border-right: none; on the last <a> in your .primary-navigation.
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation li:last-child a {
border-right: none;
}
More on the :last-child pseudo-class on MDN.
You can use CSS selector :not(:last-child) to select all your element BUT the last.
ul.menu {
list-style-type : none;
padding : 0px;
}
ul.menu > li {
display : inline-block;
padding-right : 2px;
}
ul.menu > li:not(:last-child) {
border-right : solid 1px black;
}
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
/* border-right: 1px dotted #7b7f82; <-- REMOVE from this declaration block */
position: relative;
line-height: 1;
}
.primary-navigation a:not(:last-child) {
border-right: 1px dotted #7b7f82;
}
Using the :not() negation and :last-child pseudo-classes, all anchors are given the border, except the last one.
Just FYI, this method may be simpler:
a + a {
border-left: 1px dotted #7b7f82;
}
Using the adjacent sibling selector, a left-side border can be applied to all anchors immediately following another anchor. This means no left-side border on the first anchor, and no right-side border on the last anchor.
Add this style to you css:
.primary-navigation { float: left; }
.primary-navigation ul {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation ul:last-child {
border-right: none;
}
<li class="primary-navigation">
<ul class="menu clearfix" id="menu-primary-menu">Page 1</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 2</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 3</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 4</ul>
</li>
The above picture is what my nav bar more or less is supposed to look like. I'm coding my wordpress site from scratch and my nav bar with a header class="site-header" will not display:block or have its text-decoration removed. What's strange is that
.site-header nav ul li {
margin-right: 5px;
}
works. The boxes just don't show up for some reason.
Help would be much appreciated : )
/*
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/
body {
font-family: 'Malgun Gothic','맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif;
font-size: 20px;
color: #333;
}
a:link
a:visited {
color: #006ec3;
}
p {
line-height: 1.65em;
}
/* General Layout */
div.container {
max-width: 920px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
article.post {
border-bottom: 2px dotted #999;
}
article.post:last-of-type {
border-bottom: none;
}
/* Header */
.site-header {
border-bottom: 2px solid #999
}
/* Footer */
.site-footer {
margin-top: 30px;
border-bottom: 2px solid #999
}
/* Navigation Menus */
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1; }
.site-nav ul li {
list-style: none;
float: left;
}
/* Site Header Menu */
.site-header nav ul li {
margin-right: 5px;
}
.site-header nav ul li a:link,
.site-header nav ul li a:visited, {
display: block;
padding: 10px 18px;
border: 1px solid #BBB;
border-bottom: none;
text-decoration: none;
}
.site-header nav ul li a:hover {
background-color: grey;
}
<!--footer.php-->
<footer class="site-footer">
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'footer'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
<p><?php bloginfo('name'); ?> - © <?php echo date('Y');?></p>
</footer>
</div><!--/container-->
<?php wp_footer(); ?>
</body>
</html>
<!--functions.php-->
<?php
function learningWordPress_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
// Navigation Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu'),
));
<!--header.php-->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!--site-header-->
<header class="site-header">
<h1><?php bloginfo('name'); ?> </h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
</header><!--/site-header-->
<!--index.php-->
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
<?php endwhile;
else:
echo '<p>No content found</p>';
endif;
get_footer();
?>
}
Your code has a minor syntax error, causing your styles to not be applied:
.site-header nav ul li a:link,
.site-header nav ul li a:visited, {
The extra comma , at the end expects an additional selector, but was met with a {. Simply remove the extra comma. That should solve your problems.
Working demo:
/*
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/
body {
font-family: 'Malgun Gothic', '맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif;
font-size: 20px;
color: #333;
}
a:link a:visited {
color: #006ec3;
}
p {
line-height: 1.65em;
}
/* General Layout */
div.container {
max-width: 920px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* Header */
.site-header {
border-bottom: 2px solid #999
}
/* Navigation Menus */
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul:before,
.site-nav ul:after {
content: "";
display: table;
}
.site-nav ul:after {
clear: both;
}
.site-nav ul {
*zoom: 1;
}
.site-nav ul li {
list-style: none;
float: left;
}
/* Site Header Menu */
.site-header nav ul li {
margin-right: 5px;
}
.site-header nav ul li a:link,
.site-header nav ul li a:visited {
display: block;
padding: 10px 18px;
border: 1px solid #BBB;
border-bottom: none;
text-decoration: none;
}
.site-header nav ul li a:hover {
background-color: grey;
}
<div class="container">
<!--site-header-->
<header class="site-header">
<h1>Blog Name</h1>
<h5>Blog Desc</h5>
<nav class="site-nav">
<ul class="menu">
<li class="menu-item">Link 1
</li>
<li class="menu-item">Link 2
</li>
<li class="menu-item">Link 3
</li>
</ul>
</nav>
</header>
</div>
Is there a way to move the Buddypress "buddybar" from the admin bar into the navigation header of my theme. I want to use the "buddybar" menu and drop downs exactly as they are without being forced to use the admin bar.
I have been unable to find any documentation or forum discussions on this. Is there a starting function that can be called, that will load the "buddybar" elsewhere in my theme.
All you need is one piece of code to output most of what you need.
<?php bp_nav_menu(); ?>
Below is the the html and css is used to create the dropdown.
HTML
<ul class="dropdown-menu">
<li>
<ul id="drop-down-user-actions" class="ab-submenu hover">
<li id="drop-down-user-info"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo get_avatar( $current_user->ID, '65' );?></a></li>
<li id="drop-down-user-profile"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo $current_user->display_name ?></a></li>
<li id="drop-down-edit-profile"><a class="ab-item" href="<?php echo $link; ?>"><?php _e('Edit Profile','cactusthemes') ?></a></li>
<li id="drop-down-logout"><a class="ab-item" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e('Logout','cactusthemes') ?></a></li>
</ul>
</li>
<?php bp_nav_menu(); ?>
</ul>
CSS
#drop-down-user-info img {
position: relative;
width: 64px;
height: 64px;
float:left;
padding:0;
margin:0;
}
#drop-down-user-profile, #drop-down-edit-profile, #drop-down-logout {
margin-left: 80px;
}
#drop-down-user-profile {
color:#FFF;
}
#drop-down-user-profile > a {
text-transform: capitalize;
}
#menu-bp, #drop-down-user-actions {
padding: 6px 0;
background:#4c4c4d;
min-width: 264px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color:#C5C5C5
}
#drop-down-user-actions {
background:#26292c;
padding: 20px;
}
#menu-bp > li {
background:#4c4c4d;
}
#menu-bp > li > a, #menu-bp > li > ul > li > a {
padding-right: 1em;
padding-left: 1em;
line-height: 26px;
height: 26px;
white-space: nowrap;
min-width: 140px;
display: block;
}
#menu-bp > li.menu-parent:hover, #menu-bp > li.menu-parent > a:hover, #menu-bp .sub-menu li a:hover {
color: #e14d43;
}
#menu-bp .sub-menu li a {
color: #C5C5C5!important;
}
#menu-bp .sub-menu li a:hover {
color: #e14d43!important;
}
#menu-bp .menu-parent>a:before {
color: inherit!important;
position: relative!important;
font-size: 14px!important;
font-family: FontAwesome!important;
-webkit-font-smoothing: antialiased!important;
right: 5px!important;
top:0px!important;
content: "\f0d9"!important;
}
#menu-bp .menu-parent .sub-menu li > a:before, .dropdown-menu #drop-down-user-actions li > a:before {
content:none!important;
}
#menu-bp > li > ul {
display: none;
margin-left: 0;
left: inherit;
right: 100%;
padding:6px 10px;
margin-top:-32px;
position: absolute;
background:#4c4c4d;
}
#menu-bp .menu-parent:hover > .sub-menu {
display: block;
transition: all .1s ease;
}
#menu-bp > li > ul > li a {
padding:0;
}
#menu-bp li > a > span {
display:none;
}
#menu-bp > li > a {
pointer-events: none;
cursor: default;
}
This should give you a near exact copy of the buddybar but without the admin bar itself
Thanks to the inspiration from the previous answer I came up with this, which also includes the notification bit.
<?php
if (is_user_logged_in()) {
?>
<nav class="bp-nav" role="navigation">
<ul id="bp-nav-menu">
<li id="bp-nav-menu-notifications" class="menupop">
<a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo $menu_link; ?>">
<?php echo $menu_title; ?>
</a>
<div class="bp-nav-menu-sub-wrapper">
<ul id="bp-nav-menu-notifications-default" class="bp-nav-menu-submenu">
<?php
$notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id(), 'object' );
$count = ! empty( $notifications ) ? count( $notifications ) : 0;
$alert_class = (int) $count > 0 ? 'pending-count alert' : 'count no-alert';
$menu_title = '<span id="ab-pending-notifications" class="' . $alert_class . '">' . number_format_i18n( $count ) . '</span>';
$menu_link = trailingslashit( bp_loggedin_user_domain() . bp_get_notifications_slug() );
if ( ! empty( $notifications ) ) {
foreach ( (array) $notifications as $notification ) {
?>
<li id="bp-nav-menu-notification-<?php echo $notification->id; ?>">
<a class="bp-nav-menu-item" href="<?php echo $notification->href; ?>">
<?php echo $notification->content; ?>
</a>
</li>
<?php
}
} else {
?>
<li id="bp-nav-menu-no-notifications">
<a class="bp-nav-menu-item" href="<?php echo $menu_link; ?>">
<?php echo __( 'No new notifications', 'buddypress' ); ?>
</a>
</li>
<?php
}
?>
</ul>
</div>
</li>
<li id="bp-nav-menu-my-account" class="menupop with-avatar">
<a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit/">
<?php bp_loggedin_user_fullname(); ?><?php bp_loggedin_user_avatar( 'type=thumb&width=28&height=28' );?>
</a>
<div class="bp-nav-menu-sub-wrapper">
<ul id="bp-nav-menu-user-actions" class="bp-nav-menu-submenu hover">
<li id="bp-nav-menu-user-info">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>">
<?php bp_loggedin_user_avatar( 'type=thumb&width=64&height=64' );?>
</a>
</li>
<li id="bp-nav-menu-user-profile">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
<?php bp_loggedin_user_fullname(); ?>
</a>
</li>
<li id="bp-nav-menu-edit-profile">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
<?php _e('Edit My Profile', 'buddypress') ?>
</a>
</li>
<li id="logout">
<a class="bp-nav-menu-item" href="<?php echo wp_logout_url( get_permalink() ); ?>">
<?php _e('Log Out', 'buddypress') ?>
</a>
</li>
</ul>
<?php bp_nav_menu(); ?>
</div>
</li>
</ul>
</nav>
<?php
}
?>
The only thing is, I am moving the first <li> out into a functions.php func, because then I'll be able to check it for updates via ajax.
Here's some basic CSS to get started. You probably aren't going to want it to look like the admin bar so no need to try to duplicate that:
#bp-nav-menu > li {
display: inline-block;
}
#bp-nav-menu > li.menupop {
position: relative;
}
#bp-nav-menu > li.menupop .bp-nav-menu-sub-wrapper {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 3;
background: #ccc;
min-width: 200px;
}
#bp-nav-menu > li.menupop:hover .bp-nav-menu-sub-wrapper {
display: block;
}
#bp-nav-menu #bp-nav-menu-notifications > a {
padding: 0 0.5em;
}
#bp-nav-menu #bp-nav-menu-notifications > a span {
background: #ddd;
color: #333;
padding: 2px 5px;
border-radius: 4px;
}
#bp-nav-menu #bp-nav-menu-user-actions {
list-style: none;
overflow: hidden;
width: 250px;
}
#bp-nav-menu #bp-nav-menu-user-actions > li {
float: left;
clear: right;
}
#bp-nav-menu #bp-nav-menu-user-actions > li#bp-nav-menu-user-info {
clear: none;
}
#bp-nav-menu #menu-bp {
background: #aaa;
list-style: none;
padding: 0;
}
#bp-nav-menu #menu-bp .no-count {
display: none;
}
#bp-nav-menu #menu-bp .menu-parent {
position: relative;
}
#bp-nav-menu #menu-bp .menu-parent:before {
content: "\f141";
font-family: Dashicons;
}
#bp-nav-menu #menu-bp .menu-parent .sub-menu {
display: none;
position: absolute;
left: -200px;
top: 0;
width: 200px;
background: #999;
list-style: none;
}
#bp-nav-menu #menu-bp .menu-parent:hover .sub-menu {
display: block;
}
If you happen to prefer LESS like me:
#bp-nav-menu {
> li {
display: inline-block;
&.menupop {
position: relative;
.bp-nav-menu-sub-wrapper {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 3;
background: #ccc;
min-width: 200px;
}
&:hover {
.bp-nav-menu-sub-wrapper {
display: block;
}
}
}
}
#bp-nav-menu-notifications {
> a {
padding: 0 0.5em;
span {
background: #ddd;
color: #333;
padding: 2px 5px;
border-radius: 4px;
}
}
}
#bp-nav-menu-user-actions {
list-style: none;
overflow: hidden;
width: 250px;
> li {
float: left;
clear: right;
&#bp-nav-menu-user-info {
clear: none;
}
}
}
#menu-bp {
background: #aaa;
list-style: none;
padding: 0;
.no-count {
display: none;
}
.menu-parent {
position: relative;
&:before {
content: "\f141";
font-family: Dashicons;
}
.sub-menu {
display: none;
position: absolute;
left: -200px;
top: 0;
width: 200px;
background: #999;
list-style: none;
> li {
}
}
&:hover .sub-menu {
display: block;
}
}
}
}
I am trying to get three images to connect for my content box but for some reason there is some space between the second and the third. Any help would be appreciated.
here is the site: http://hyvhuynh.com/hyperbolical-blog
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class();?> id="post-<?php the_ID();?>">
<div id="mythreedivs">
<div id="top">
</div>
<div id="mid">
<h2 class="post-title"><?php the_title(); ?></h2>
<ul class="meta">
<li><?php the_time('F j, Y'); ?></li>
</ul>
<div class="postcontent">
<?php the_content(the_title('', '', false)." - continue reading"); ?>
</div>
<ul class="meta postfoot">
<?php if('open' == $post->comment_status) : ?><li class="comment_link"><?php comments_popup_link('Comment on '.$post->post_title, '1 Comment on '.$post->post_title, '% Comments on '.$post->post_title,'postcomment','Comments are off for '.$post->post_title); ?></li><?php endif;?>
<?php if(get_the_tag_list()) :?>
<li>Tags: <?php the_tags('<ul><li>',',</li> <li>','</li></ul>');?></li>
<?php endif;?>
</ul>
</div>
<?php endwhile; ?>
<ul class="prevnext">
<li><?php next_posts_link('« Older Posts'); ?></li>
<li><?php previous_posts_link('Newer Posts »');?></li>
</ul>
<div id="bottom">
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
---------css---------------
#mid {
background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodymiddle.png');
width:806px;
}
#bottom {
background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodybottom.png');
width:806px;
height:27px;
}
#header {
width:800px;
float:right;
margin:0 0 50px 0;
}
/*
Navigation Bar Time!
*/
#jsddm
{ margin: 20px 0 0 0;
padding: 0;
font-weight:bold;
text-shadow: #000000;
}
#jsddm li
{ float: left;
list-style: none;
font: bold 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #E7E7EF;
padding: 5px 12px;
text-decoration: none;
border: 1px solid #555555;
width: 70px;
color:#000000;
white-space: nowrap}
#jsddm li a:hover
{ background: #1A4473}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #E7E7EF}
#jsddm li ul li a:hover
{ background: #1A4473}
/*
End Navigation Time!
*/
.logo {
float:right;
}
#content .post {
float:left;
width:800px;
}
#content .page,#content .attachment,.postcontent {
width:800px;
text-decoration:none;
}
.photo {
width: 250px;
height:700px;
background-color:#000000;
margin:0 0 0 880px;
}
.slideshow { height: 232px; width: 232px; margin:0 0 0 880px; }
.slideshow img { border: 5px solid #000; }
.post-title {
margin:0;
padding:0;
text-align:center;
}
.post-title a {
text-decoration:none;
color:#000000;
}
.post-title a:hover,.post-title a:active,.post-title a:focus {
text-decoration:underline;
color:#5F625F;
}
#content .meta li,#content .prevnext li,#content .gallery li {
list-style-image:none;
list-style:none;
}
.meta {
margin:5px 0 0;
padding:0;
font-size:.85em;
}
.meta ul,.meta li {
margin:0;
padding:0;
}
.meta ul {
display:inline;
}
.meta li li {
display:inline;
padding-right:.3em;
}
.postfoot {
clear:both;
padding-bottom:10px;
line-height:1.2em;
}
.author .posts-by {
padding-top:10px;
}
.clearfix {
display: inline-block; }
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer {
clear:both;
margin:0 auto;
padding:0 0 5px;
text-align:center;
font-size:.8em;
border: 0;
width:800px;
height:200px;
}
#footer ul {
clear:both;
margin:0;
padding:0;
}
#footer li {
display:inline;
margin:0;
padding:0 5px;
}
#footer li.rss {
position:relative;
top:3px;
}
.copyright {
}
.copyright a
{
}
.copyright a:hover
{
}
.postcontent p {
text-decoration:none;
border:0;
border-style:none;
}
.postcontent p a:hover {
color:#fff;
}
The space is from the margin on your unordered list. Add this to your stylesheet
ul.prevnext {margin: 0px;}
And it'll correct it. I'm not sure what you're doing with it though, so you may want to just scrap it for now because once you add any items, it will pop up again. Or move it to a different position as mltsteeves mentioned.
<ul class="prevnext"> is causing the space between the two divs, try putting it inside the previous div.
You have nesting errors in your markup. I would sort them out first, from what I can see in Firebug, it might already sort it out.
end tag for "div" omitted, but OMITTAG NO was specified
end tag for "ul" which is not finished
The block below:
<ul class="prevnext">
<li></li>
<li></li>
</ul>
is not contained inside the proper <div> tag, it is between your mid and bottom divs.