I have this class for my menu: .site-header-menu
and I have this class for my content: .content
what should I do to catch .content when .site-header-menu is displayed?
I already tried this but it doesn't work:
.site-header-menu + .content{
opacity: 0;
}
Do you have some suggestion? This kind of things are possible using css?
I'm using Wordpress so this is my php struture in header.php. The idea is to hide the content of my page template when site-header-menu is open:
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<!--<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>-->
<button id="menu-toggle" class="menu-toggle" data-title="<?php the_title(); ?>"><?php the_title(); ?></button>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>" data-title= ''>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
How is .site-header-menu being displayed? Is a class being added to display the menu or is its display property being directly manipulated by JavaScript? There is no indication how you can tell if the menu is displayed?
.site-header-menu + .content{
opacity: 0;
}
The above rule, because of the plus sign, will only apply if the element with class content is immediately following the element with class site-header-menu in the DOM. For example:
<div class="site-header-menu">
... menu stuff ...
</div>
<div class="content">
... content stuff ...
</div>
This might be the problem, but without actually seeing the output HTML it's hard to say.
If you are using PHP or JS to toggle the visibility of the menu you could potentially add/remove an additional class to .content that will hide/show it based on the menu being displayed or not.
/* CSS rule to hide the .content element */
.content.hideMe {
visibility: none;
}
// pseudo-script click event handler (NOT REAL SCRIPT!)
function menuButtonClick() {
if (menuCurrentlyDisplayed) {
// menu is already displayed so hide it and show content
hideMenu;
removeClass(".content", "hideMe");
} else {
// menu is not yet displayed so show it and hide content
showMenu;
addClass(".content", "hideMe");
}
}
If you could post your output HTML, or set up a fiddle for us to take a look, it would be helpful.
Related
During the process of working on my new WordPress site using Humescores as the theme, I noticed that my primary navigation menu stopped displaying. Upon inspection though, one can see that the navigation and li items are indeed in the page. But I cannot get them to render. I've set the background color of the navigation to red with a yellow border so you can see where it is. And I've attempted to set the font color to white but you can see none of the links are displaying. Very wierd behavior. What gives?
From functions.php
register_nav_menus( array(
'primary' => esc_html__( 'Header', 'humescores' ),
) );
From header.php
<nav id="site-navigation" class="main-navigation" style="border: 2px solid yellow; background-color:red; color:#fff;">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'humescores' ); ?></button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
ChromeDevToolsScreenShot
Try to add z-index:99999; inside the css for the navigation.
I am trying to change the color of the form labels and I was wondering how to do it.
<div class="form-group">
<div class="medium-6 columns">
<?php
echo form_label('First Name');
$data = array(
'class'=>'form-control',
'name'=>'fname',
'placeholder'=>'First Name'
);
echo form_input($data);
?>
</div>
Use always form_helper way
$attributes = array(
'class' => 'class-name-yours', // external or internal css
'style' => 'color: #000;' // or inline css, this is black color
);
echo form_label('First Name', 'firstname', $attributes); //first name is form id
In your form open if you have a id="exmaple" In your css file have you tried
#example label {
color: #222222;
}
You may need important
#example label {
color: #222222 !important;
}
And looks like your mixing foundation code with bootstrap code bootstrap col-md-6
http://getbootstrap.com/css/#grid-options
I think best option is..
<div id="firstname" style="color: orange;">
<?php
echo form_label('First Name') ;
?>
</div>
I am building this website where I have pages with child pages, when I click on the parent link in the navigation menu, I get redirected to that page. It will then display links to all its child pages on that page, my problem is that I want the parent page link in the navigation menu to always be highlighted even when I click on the child page link. So in the end both the parent page link AND the child page link should be highlighted.
I have tried some different things, but none seem to work, I can loop out all the child pages of the parent, but not make them highlighted.
<?php
if ( $post->post_parent ) :
$parent = $post->post_parent;
else :
$parent = $post->ID;
endif;
$childpages = get_pages('child_of=' . $parent . '&sort_column=menu_order');
?>
<div class="row pad60">
<ul class="category-nav column">
<?php foreach( $childpages as $childpage ) { ?>
<a href="<?= get_page_link( $childpage->ID ) ?>">
<li><div class="primary-btn"> <?= $childpage->post_title ?> </div></li>
</a>
<?php } // End foreach ?>
</ul>
</div>
This is what I am using right now, but I feel this isn't the right way to go in the first place..
Thank you!
WordPress has a build in CSS classes to target the menus. https://developer.wordpress.org/reference/functions/wp_nav_menu/#Menu_Item_CSS_Classes
// This will highlight all the current menus
.current-menu-item a {
color: blue;
}
/* This will highlight its parent, when you are in its child page. */
.current_page_parent a {
color: orange;
}
I want to hide the site-title and site-description on IE9 and lower. I've hidden them via the appearance option, so its hidden on Chrome, Firefox, IE10+, but it still appear on IE9 and lower.
I've tried to add all this css, but I can not manage to make it work:
.site-description {
font-size: 10pt;
}
h2 .site-description {
font-size: 10pt;
display:none !important;
}
#title_subtitle{
display:none !important;
}
#site-title a, #site-description a {visibility:hidden !important;}
.site-title a, .site-description a {visibility:hidden !important;}
I've also tried to delete them in the header, but doesn't work:
the part of the header is:
<div id="masterheader"><header id="masthead" class="site-header" role="banner">
<a class="home-link"<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<div id="logo_and_title">
<img class="header-logo" src="http://thibaultrolando.com/vinacotheque/wp-content/uploads/2014/03/logo.png"/>
<div id="title_subtitle">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
I'm currently working with a child-theme of twenty-thirteen. I've tried to do this in the style.css and also ie.css from my child, and also the original theme, but it doesn't seem to work ...
If you want to hide them via php, you should be able to remove them from your theme's header.php file. Try commenting out the lines that generate the text. If that does the trick, you can delete them.
<div id="title_subtitle">
<!--
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
-->
</div>
I'm using a lightbox plugin the uses rel="lightbox" to fire the lightbox in a gallery I'm creating using the Advanced Custom Fields pluin. All works great until I want to add a child div that is absolutely positioned in the box div. It's supposed to change opacity on hover and still have the lightbox fire.
My markup
<?php if(get_field('image')):
$attachment_id = get_field('image');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
?>
<?php echo wp_get_attachment_image( $attachment_id, medium); ?>
<div class="hover-title">
<?php the_field('hover_title');?>
</div><!-- hover title -->
<?php endif; ?>
</div><!-- box -->
If I simply remove the "hover-title" lightbox works. But I want to use that :)
my css:
.box a {
margin:5px;
float:left;
position: relative;
overflow: hidden;
opacity: 1;
display: block;
}
is that the full code. if so then you are missing an opening <div>.
fyi your first two lines should read
$attachment_id = get_field('image');
if ( $attachment_id ) {
}
no need to call get_field() twice, it is a database call after all.
Good Luck