I added the text "MENY" next to the toggle (nav trigger) since I thought it would be confusing for desktop visitors when visiting my site. However I can't seem to get the text to line up nicely with the toggle icon. How do I lower or raise the text next to the icon so it looks good?
Here's the .php:
<a href="#" id="nav-trigger">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
Image of issue can be found here: [a link]http://i41.tinypic.com/2jd3l9k.png (not enough rep to add images)
Also, if there's a way to bring them closer together... but that's just a bonus!
Thanks for all help! I'm a beginner trying to learn. :)
Entire header.php >nav-trigger<
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php thb_body_start(); ?>
<div id="page">
<?php thb_header_before(); ?>
<header id="header">
<?php thb_header_start(); ?>
<div class="header-container">
<div class="wrapper">
<?php
$logo = thb_get_option('main_logo');
$logo_2x = thb_get_option('main_logo_retina');
if( !empty($logo['id']) && !empty($logo_2x['id']) ) : ?>
<?php $logo_metadata = wp_get_attachment_metadata($logo['id']); ?>
<style>
#media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('<?php echo thb_image_get_size($logo_2x['id'], 'full'); ?>');
background-size: <?php echo $logo_metadata['width']; ?>px, <?php echo $logo_metadata['height']; ?>px;
}
#logo img { visibility: hidden; }
}
</style>
<?php endif;
?>
<h1 id="logo">
<a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
<?php if( isset($logo['id']) && $logo['id'] != '' ) : ?>
<img src="<?php echo thb_image_get_size($logo['id'], 'full'); ?>" alt="">
<?php else : ?>
<?php bloginfo( 'name' ); ?>
<?php endif; ?>
</a>
</h1>
<?php thb_nav_before(); ?>
<a href="#" id="nav-trigger">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
<div class="nav-wrapper">
<nav id="main-nav" class="main-navigation primary">
<?php thb_nav_start(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<?php thb_nav_end(); ?>
</nav>
<nav id="mobile-nav" class="main-navigation primary">
<?php thb_nav_start(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<?php thb_nav_end(); ?>
</nav>
</div>
<?php thb_nav_after(); ?>
</div>
</div>
<div class="wrapper">
Create a div with the image in it.
Create a div with the text in it.
<div class='myimage'><img src='yourimg'></div>
<div class='menytext'>meny</div>
.menytext{float:left;margin:0 0 0 -50px} (for example)
Float the text div over the image and then you will be able to position the text however you like.
because inline tag has a space, you can add between them, like
<a href="#" id="nav-trigger"><!--
--><span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span>
Related
I have a problem when making a wordpress theme cannot responsive when zooming and open on Internet Explorer/Edge and got worst result after tested on many devices like screenshot below:
Cannot compatible with IE/Edge:
Cannot responsive when zooming:
Index.php
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
* #package test
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php endif; ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
?>
<?php endwhile; ?>
<?php the_posts_navigation(); ?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Header.php
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
global $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'gg' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="main-navigation2" role="navigation">
<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'gg' ); ?></button>
<ul class="mini-cart">
<li> <a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php esc_attr_e('View your shopping cart'); ?>" class="cart-parent">
<div class="bubblex">
<div class="inside">
<div class="inside-text">
<?php
echo sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count), $woocommerce->cart->cart_contents_count);
?></div>
</div>
</div>
<i class="cart_control">::before</i></a>
<?php
echo '<ul class="cart_list">';
echo '<li class="cart-title"><b>Isi Keranjang:</b></li>';
if (sizeof($woocommerce->cart->cart_contents)>0) : foreach ($woocommerce->cart->cart_contents as $cart_item_key => $cart_item) :
$_product = $cart_item['data'];
if ($_product->exists() && $cart_item['quantity']>0) :
echo '<li class="cart_list_product"><a href="' . esc_url( get_permalink( intval( $cart_item['product_id'] ) ) ) . '">';
/* echo $_product->get_image(); */
echo apply_filters( 'woocommerce_cart_widget_product_title', $_product->get_title(), $_product ) . '</a>';
if($_product instanceof woocommerce_product_variation && is_array($cart_item['variation'])) :
echo woocommerce_get_formatted_variation( $cart_item['variation'] );
endif;
echo '<span class="quantity">' . $cart_item['quantity'] . ' × ' . woocommerce_price( $_product->get_price() ) . '</span></li>';
endif;
endforeach;
else: echo '<li class="empty">' . __( 'Keranjang kosong') . '</li>'; endif;
if ( sizeof( $woocommerce->cart->cart_contents ) > 0 ) :
echo '<li class="total">';
echo '<span class="amount2">Subtotal</span>' . $woocommerce->cart->get_cart_total() . '</li>';
echo '<p class="buttons">Detail Checkout</p>';
endif;
echo '</ul>';
?>
</li> </ul>
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="site-branding">
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif; ?>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'gg' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #site-wrapper -->
</header><!-- #masthead -->
<div id="content" class="site-content">
Style.css
body {
/* margin: 0 170px 0 20px; */
max-width: 100%;
background: #fff;
margin-left: auto;
margin-right: auto;
}
body {
background-image: url('img/background.png');
background-size: 960px 1600px;
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}
#media only screen and (max-width: 1200px)
#content {
background-color: #FFFFFF;
}
site-content {
margin: 107px 23.5%;
}
.main-navigation2 {
float: none;
height: 59px;
margin: -18px 196px;
font-size: 12px;
/* font-style: normal; */
}
For further information please check out on development link.
So how I can fix it?
Apply some global styles without media queries then work backwards depending on resolution needs with media queries.
I made some minor changes to your css while viewing in 1200 wide and it fixed the menu issue perfectly. When zooming, it defaulted to the relevant media query.
.main-navigation {
width: 960px;
margin: auto;
}
.menu-primary-menu-container {
margin: 0 0 0 200px;
float: right;
}
ul#primary-menu {
margin: 0px;
}
.main-navigation li {
float: left;
}
.main-navigation a {
padding: 4px 29px 0 16px;
display: block;
text-decoration: none;
/* line-height: 50px; */
color: #000;
font-family: sans-serif;
font-weight: bold;
font-size: small;
}
Bootstrap is a better approach, but I see you've already put some fair amount of work into this theme. This might not be a complete solution, but in theory if you make some minor adjustments as I did below, you can then adjust them as needed for varying viewport sizes in CSS media query.
I placed 2 pictures (facebook and youtube) to my header, however, the problem now is they seems not click-able despite they are links and when view in mobile, they are blocked by the contact number on the top.
http://seaicf.com
I'm out of idea on how to fix this, can anyone help?
Here's my header.php until the line where I insert the pictures:
<body <?php body_class(); ?>>
<div id="page-container">
<?php
if ( is_page_template( 'page-template-blank.php' ) ) {
return;
}
$et_secondary_nav_items = et_divi_get_top_nav_items();
$et_phone_number = $et_secondary_nav_items->phone_number;
$et_email = $et_secondary_nav_items->email;
$et_contact_info_defined = $et_secondary_nav_items->contact_info_defined;
$show_header_social_icons = $et_secondary_nav_items->show_header_social_icons;
$et_secondary_nav = $et_secondary_nav_items->secondary_nav;
$primary_nav_class = 'et_nav_text_color_' . et_get_option( 'primary_nav_text_color', 'dark' );
$secondary_nav_class = 'et_nav_text_color_' . et_get_option( 'secondary_nav_text_color', 'light' );
$et_top_info_defined = $et_secondary_nav_items->top_info_defined;
?>
<?php if ( $et_top_info_defined ) : ?>
<div id="top-header" class="<?php echo esc_attr( $secondary_nav_class ); ?>">
<div class="container clearfix">
<div class="container clearfix">
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/images/logo.png';
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>
<?php if ( $et_contact_info_defined ) : ?>
<div id="et-info">
<?php if ( '' !== ( $et_phone_number = et_get_option( 'phone_number' ) ) ) : ?>
<span id="et-info-phone"><?php echo esc_html( $et_phone_number ); ?></span>
<?php endif; ?>
<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
<span id="et-info-email"><?php echo esc_html( $et_email ); ?></span>
<?php endif; ?>
<?php
if ( true === $show_header_social_icons ) {
get_template_part( 'includes/socialGoogle analytic_icons', 'header' );
} ?>
</div>
</div> <!-- #et-info -->
<ul class="et-social-icons">
<div><img src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" width="75" height="25"/> <img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" width="75" height="25"></div>
Updated with the CSS that controls the classes in that header:
#top-header .container {
padding-top: 10px;
}
.container {
text-align: left;
margin: 0 auto;
width: 1080px;
position: relative;
}
media="all"
#top-header .et-social-icons {
float: right;
display: inline-block;
margin-top: -37px;
-moz-margin-top: 5px;
-webkit-margin-top: 5px;
}
Trying to float the two wrappers to the right makes things hard. It is easier to just have one left column on the left and one on the right. In the one on the right you can then place add an extra wrapper div to have the social media buttons appear under the phone number:
<div class="container clearfix">
<a href="http://seaicf.com/%e9%a6%96%e9%a1%b5/">
<img src="http://seaicf.com/wp-content/uploads/2015/02/logo-75.png" alt="ISI MonQ Academy" id="logo">
</a>
<div id="et-info">
<div>
<span id="et-info-phone">1800-800-800</span>
<span id="et-info-email">info#seaicf.com</span>
</div>
<ul class="et-social-icons">
<div>
<img src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" height="25" width="75">
<img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" height="25" width="75">
</div>
</ul>
</div>
</div>
Floating things is complicated, just replace the classes you made with this:
.container {
text-align: right;
margin: 0px auto;
width: 1080px;
position: relative;
}
#top-header .et-social-icons {
margin-top: 10px;
}
#et-info {
font-size: 20px;
}
So I know masonry in a single column has been covered a few times on stack but I'm not very familiar with jquery and I'm not sure of the adjustments I need to make. I'm also not extremely proficient in wordpress to know if I am making an obvious mistake here. I'm editing a theme and I'm trying to make the blog use a masonry layout. The theme calls the post loop from it's own php file so the blog is kind of broken up in to several php files. I hope I am including the right info.
The posts are showing up in blocks but it's just one column straight down. It seems the container is going all the way across the page on each post. I'm not sure if it's not stopping the loop or what I need to add so that each post spreads across the container width. Any help or tips on what I am doing wrong would be greatly appreciated. Thanks in advance.
I added this to my functions.
function wdv_enqueue_scripts() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );
This to my footer.php
<script>
jQuery( document ).ready( function( $ ) {
$( '#container2' ).masonry( { columnWidth: 220 } );
} );
</script>
Here is my code for the loop.
<div id="container2">
<?php
global $ae_post_factory;
$ae_post = $ae_post_factory->get('post');
$post = $ae_post->current_post;
?>
<div class="brick">
<div class="brick_header">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
<h4 class="media-heading title-blog"><?php the_title(); ?></h4>
</a>
</div>
<div class="brick_featured_image">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail (); ?>
</a>
<?php endif; ?>
</div>
<?php the_excerpt(); ?>
Read More
</div>
</div><!-- container -->
And this is the CSS
* masonry brick layout */
#container2 {
width: 100%; /* width of the entire container for the wall */
margin-bottom: 10px;
}
.brick {
width: 30%; /* width of each brick less the padding inbetween */
padding: 0px 10px 15px 10px;
background-color: #fff;
margin-top: 5px;
}
.brick_header{
border-bottom: solid 1px #1d1d1d;
padding-bottom: 10px;
padding-top: 10px;
}
.brick_header a{
color: #ffff00;
}
.brick_header a:hover{
color: white;
}
.brick_featured_image{
width: 100%;
margin-top: 10px;
}
.brick_featured_image img{
width: 100%;
height: auto;
}
Here you're providing Column-Width in JS 220px.
And in CSS : 30%.
That might be creating problems.
Make sure your HTML Structure Looks like this.
<div id="container2">
<div class="brick">...</div>
<div class="brick">...</div>
<div class="brick">...</div>
</div>
And CSS :
.container2{
width:100%;
}
.brick{
width:25%;
/*
This should be respective of the columns you want
Like for 4 columns, 100%/4 = 25%
*/
}
And JS.
var $container2 = $('#container2');
$container.masonry({
itemSelector: '.brick'
});
For more detailed explaination : http://masonry.desandro.com/#getting-started
To know more details on the problem you're having, kindly provide the URL so I can have a look at it and can provide exact solution.
I personally use the "js-masonry" class mainly because if you are using a framework such as Bootstrap or Modest Grid, it will keep the gutter settings, etc.
Here is an example:
<div class="js-masonry">
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="dt-6 tl-6 tp-6">
<article>
<h2>
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
<i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i>
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt(); ?>
<div class="download">
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
View <?php the_title(); ?>
</a>
</div>
</article>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>No posts to display</h2>
<?php endif; ?>
Notice that the <div class="js-masonry"> is outside of the while.
i have a menu in the left and i want the site-content resize by changing the screen size. actually like in https://myspace.com/
what i have now:
the menu in the left side. this is the code:
.main-navigation {
background-color: #000000;
border-left: 1px solid #cccccc;
display: block;
float: left;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: normal;
max-width: 50%;
position: absolute;
top: 85px;
width: 150px;
height: auto;
text-align: right;
text-transform: capitalize;
}
the site-content i putted margin-left 150px to put the content after the menu because if not, the content is under the menu. :
.blog .site-content,
.archive .site-content,
.search .site-content {
margin: 0 auto;
max-width: 885px;
position: relative;
left: 0px;
margin-left: 150px;
}
and the article that inside:
.blog .site-content .hentry,
.archive .site-content .hentry,
.search .site-content .hentry {
float: left;
margin: 0;
overflow: hidden;
width: 295px;
height: 295px;
}
the main-index is:
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', 'home' );
?>
<?php endwhile; ?>
<?php pictorico_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>
the nav(menu) is in the header so the header:
<?php wp_head(); ?>
>
<header id="masthead" class="site-header" role="banner">
<div class="site-header-inner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'pictorico' ); ?></span></h1>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pictorico' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
<div class="header-search">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<?php if ( is_home() && pictorico_has_featured_posts( 1 ) ) : ?>
<?php get_template_part( 'content', 'featured' ); ?>
<?php elseif ( get_header_image() && ( is_home() || is_archive() || is_search() ) ) : ?>
<div class="hentry has-thumbnail">
<div class="entry-header">
<div class="header-image" style="background-image: url(<?php header_image(); ?>)">
<span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span>
</div>
</div>
</div>
<?php endif; ?>
<div id="content" class="site-content">
It's a bit late to implement now, but next time look at something like Bootstrap or Zurb Foundation for frameworks that make it really fast to build responsive web apps. They take away the need for complicating things with media queries. Just a thought
Your content is not going to re-size because you have given it a fixed width (295px). Since you floated them, they should just re-arrange themselves based on how much room there is in site-content.
If you actually want the articles to re-size, give them percentage widths. Then, as site-content changes width, they will also.
If you want to keep the aspect ratio (height/width), then you need a wrapper that maintains the aspect ratio using % padding and put the content in it using postion: absolute. See, for example, Maintain the aspect ratio of a div with CSS.
i'm having problems with the Lightbox Plus plugin. I need to create a bunch of elements in my homepage, and Lightboxes linked to them to show more content. Now, I managed to create all the elements needed, but the Lightboxes generated are all the same, all with contents related to the first of the elements to be specific. If inserted in the loop shouldnt each of them be related to his "starting element"? This is the code i'm using:
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
$id = get_the_ID();
$big_image = get_field( "big_cocktail" );
$thumb_image = get_field( "thumbnail_cocktail" );;
$titolo_box = get_the_title();
$sottotitolo_box = get_field( "sottotitolo_cocktail" );
$h2_css = "margin-bottom: 5px !important;";
$sottotitolo_css = "width:100% !important; text-align:center !important; padding-top: 5px !important; margin: 0 auto !important; margin-top:20px !important;";
?>
<!--element-->
<div class="element <?php echo $category -> slug; ?>" data-category="<?php echo $category -> slug; ?>">
<a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
<img alt="" class="imgwork" src="<?php echo $thumb_image; ?>" heigth="100px"/>
</a>
<!-- THIS IS THE DIV FOR THE LIGHTBOX -->
<div style="display:none">
<div id="lbp-inline-href-1" style="background: #fff; height:100%; background-image:url('<?php echo $big_image; ?>');">
<h2 style=""><?php echo $titolo_box; ?></h2>
</div>
</div>
<!-- END DIV-->
<div class="worksarrow">
<a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
<img alt="" src="<?php echo get_template_directory_uri(); ?>/img/section-works/arrow.png" />
</a>
</div>
<a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
<h2 style=""><?php echo $titolo_box; ?></h2>
</a>
<div class="sottotitolo_portfolio" style="<?php echo $sottotitolo_css; ?>">
<?php echo $sottotitolo_box; ?> </div>
<div class="worksbottom"></div>
</div>
<!--element-->
<?php endwhile;
}
?>
I've finally solved this. He was creating all the right popups but each of them needed a specific class and ID, so it just became:
< div id="lbp-inline-href-< ?php echo $index; ?>" style="background: #fff; height:100%; background-image:url('< ?php echo $big_image; ?>');">
< ?php $index++; ? >