Hidden toggle bar in CSS

Projects
1

This is not my blog. I plan to use this theme.
http://moscowcoffeereview.com/carpecakem/

Can someone tell me the best way to add a hidden toggle bar at the top left side corner of the header? Like this one: https://mimeticmargins.com/ I right clicked to view source and I don’t know what I’m doing.

<?php /** * The header for our theme * * This is the template that displays all of the section and everything up until
* * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ ?> class="no-js no-svg"> <?php wp_head(); ?> >
<?php _e( 'Skip to content', 'twentyseventeen' ); ?> 
<header id="masthead" class="site-header" role="banner">

	<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

	<?php if ( has_nav_menu( 'top' ) ) : ?>
		<div class="navigation-top">
			<div class="wrap">
				<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
			</div><!-- .wrap -->
		</div><!-- .navigation-top -->
	<?php endif; ?>

</header><!-- #masthead -->

<?php

/*
 * If a regular post or page, and not the front page, show the featured image.
 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
 */
if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
	echo '<div class="single-featured-image-header">';
	echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
	echo '</div><!-- .single-featured-image-header -->';
endif;
?>

<div class="site-content-contain">
	<div id="content" class="site-content">
1 Like
2

The code you present uses a programming language called php to build in interactivity and animations. If you have no experience with php this might feel a bit hocus pocus for you.

But I am afraid that the kind of you things you are thinking off are only possible by using a programming language such as php or javascript on top of you HTML and CSS.

I suggest you try out the jQuery course of codecademy. jQuery is a framework for javascript especially developed for web design which is also not too complicated :wink: .

Hope this helps :wink: .

1 Like