The #media rules aren't making the different PHP pages appear and disappear. Am I doing it wrong? Also is there a better way of doing this?
This is the style within my index page and it's contained in the <head>. I'm also using external style sheets but I didn't think it'd be necessary to include them.
<style type="text/css">
<!-- Show Normal -->
#media only screen and (min-device-width: 768px) {
div#show-normal { display:block; }
div#show-mobile { display:none; }
}
<!-- Show Mobile -->
#media only screen and ((min-height : 320px) and (max-device-width : 667px)) {
div#show-normal { display:none; }
div#show-mobile { display:block; }
}
</style>
This is all of the contents of my body tag
<body>
<!-- Default -->
<div id="show_normal">
<!-- HEADER -->
<?php
include("pages/default/header.php");
?>
<!-- CONTENT -->
<div id="contentContainer">
<?php
include ("pages/default/infoStrip.php");
include ("pages/default/productStrip.php");
include ("pages/default/slideshowStrip.php");
include ("pages/default/footer.php");
?>
</div>
</div>
<!-- Mobile -->
<div id="show_mobile">
<!-- HEADER -->
<?php
include("pages/mobile/header.php");
?>
<!-- CONTENT -->
<div id="contentContainer">
<?php
include ("pages/mobile/infoStrip.php");
include ("pages/mobile/productStrip.php");
include ("pages/mobile/slideshowStrip.php");
include ("pages/mobile/footer.php");
?>
</div>
</div>
</body>
the closing parenthesis after
(max-device-width : 667px)
is missing
or better: take out one of the opening parenthesis in
((min-height : 320px)
Related
This is supposed to show no icons in mobile device.
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
so this "Menu" gotta be hidden, but its showing all these icons still.
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu
</a>
</li>
You've added the hidden-xs to the <br> element instead of the span.glyphicon. Change your code to this instead
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery hidden-xs"></span><br> Menu
</a>
</li>
You have assigned <br> the target class which will not do anything. Instead add the class to the <span>
#media screen and (max-width: 767px) {
.hidden-xs, .glyphicon{
display: none !important;
}
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu
</a>
</li>
#media screen and (max-width: 767px) add on screen
add css display:none; on both class.hidden-xs, .glyphicon
I am trying to move my first nav link (home icon) down so it doesn't get covered by the 'book free consultation' button above. It doesn't seem to apply the padding and not sure what I am doing incorrectly
CSS:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
HTML:
<div class="header-navigation-wrapper">
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<div id="mega-menu-wrap-primary" class="mega-menu-wrap">
<div class="mega-menu-toggle">
<div class="mega-toggle-blocks-left"></div>
<div class="mega-toggle-blocks-center"></div>
<div class="mega-toggle-blocks-right">
<div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-1" id="mega-toggle-block-1" tabindex="0"><span class="mega-toggle-label" role="button" aria-expanded="false"><span class="mega-toggle-label-closed">MENU</span><span class="mega-toggle-label-open">MENU</span></span></div>
</div>
</div>
<ul id="mega-menu-primary" class="mega-menu max-mega-menu mega-menu-horizontal" data-event="hover_intent" data-effect="disabled" data-effect-speed="200" data-effect-mobile="slide_left" data-effect-speed-mobile="400" data-mobile-force-width="body" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="accordion" data-breakpoint="1023" data-unbind="false" data-hover-intent-timeout="300" data-hover-intent-interval="100">
<li class="mega-nav-menu-links mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-home mega-current-menu-item mega-page_item mega-page-item-2 mega-current_page_item mega-align-bottom-left mega-menu-flyout mega-menu-item-1521 nav-menu-links" id="mega-menu-item-1521"><a class="mega-menu-link" href="https://test.com/staging/4326/" tabindex="0"><i class="fa fa-home" aria-hidden="true"></i></a></li>
...
</ul>
</div>
</ul>
</nav>
<!-- .primary-menu-wrapper -->
</div>
Image to show issue:
Try using this if it works #mega-menu-primary > li:first-child {}
I've edited this after another look at your code.
I've noticed your using the id selectorwhen you are looking for classes. The # looks for ids, but you want to look for classes, so use a . instead in your #media query
#media only screen and (max-width: 600px) {
.mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
Use margin like so:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
margin-top:20px !important;
}
}
margin helps push the nav down.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm facing logo and menu bar alignment no my website.
how can i fix it? sharing images below.
I want to make changes as below image..
What HTML or CSS code that I should Write ?
Continuing our discussion from wordpress.stackexchange.com here and here, if I get it right, what you are trying to do is having the same menu you have when you resize the browser's window size to 1180px, where the logo goes to the center, but instead of having this only when you resize the window to 1180px, you want to have this type of disposal at all time, meaning having the 1180px menu as the site's default menu.
First
So in order to do this, we need to remove the current CSS for the default menu when the screen size is bigger than > 1180px. To do this, go to - style.css:1006 (meaning go to the file style.css line 1006), and remove the following CSS:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#site-branding {
width: 20%;
padding-bottom: 5px;
min-height: 60px;
}
Second
Next thing we need to set the style for the menu when it gets at 1180px as the new default menu. In order to do this, go to: - responsive.css:48, an remove the media queries around the code, which currently the code it's something like this:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/css/responsive.css?ver=4.3.1
#media (max-width: 1180px) {
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
}
And you need to remove the #media query or just put the code outside the #media query, to be only like this:
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
Third and last
At last, fix the menu centering disposal, go to - style.css:4328 and remove the float:right; property from the id #menu:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#menu {
float: right; /* <- REMOVE THIS LINE */
position: relative;
height: 100%;
}
With this being done, the supposed menu from the size 1180px will now become the main default menu. Good luck! :)
Use this CSS for the logo:
.site-logo {
position: absolute;
top:-55px;
left:50%;
margin-left: -150px;
}
You'll want to move the following HTML,
<a class="site-logo" href="http://www.norenge.com/">
<img src="http://www.norenge.com/wp-content/uploads/2015/11/Oranemart-accesspress_store-logo.png" alt="Capital's First Online Super Store">
</a>
to be an immediate descendant of the <section class="home_navigation" element. Then apply text-align: center; to that same section element and it achieves the look you're asking for.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package AccessPress Store
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<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="page" class="hfeed site">
<header id="mastheads" class="site-header" role="banner">
<?php if (as_before_top_header_enabled()): ?>
<div class="before-top-header">
<div class="ak-container clearfix">
<?php accesspress_ticker_header_customizer(); ?>
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<div class="welcome-user">
<span class="line">|</span>
<?php _e('Welcome ', 'accesspress-store'); ?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account">
<span class="user-name">
<?php echo $current_user->display_name; ?>
</span>
</a>
<?php _e('!', 'accesspress-store'); ?>
</div>
<?php }
?>
<?php if (is_active_sidebar('header-callto-action')): ?>
<div class="header-callto">
<?php dynamic_sidebar('header-callto-action') ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="top-header clearfix">
<div class="ak-container clearfix">
<!-- Cart Link -->
<?php
if (is_woocommerce_activated()):
echo accesspress_wcmenucart();
endif;
?>
<?php
if (function_exists('YITH_WCWL')) {
$wishlist_url = YITH_WCWL()->get_wishlist_url();
?>
<a class="quick-wishlist" href="<?php echo $wishlist_url; ?>" title="Wishlist">
<i class="fa fa-heart"></i>
<?php echo "(" . yith_wcwl_count_products() . ")"; ?>
</a>
<?php
}
?>
<div class="login-woocommerce">
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" class="logout">
<?php _e(' LogOut', 'accesspress-store'); ?>
</a>
<?php
} else {
?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="account">
<?php _e('LogIn', 'accesspress-store'); ?>
</a>
<?php }
?>
</div>
<!-- if enabled from customizer -->
<?php if (!get_theme_mod('hide_header_product_search')) { ?>
<div class="search-form">
<?php get_search_form(); ?>
</div>
<?php } ?>
</div>
</div>
<section class="home_navigation">
<div class="inner_home">
<div class="ak-container clearfix">
<div id="site-branding" class="clearfix">
<?php accesspress_store_admin_header_image() ?>
</div><!-- .site-branding -->
<div class="right-header-main clearfix">
<div class="right-header clearfix">
<!-- if enabled from customizer -->
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="clearfix"></div>
<div id="menu">
<?php
if (is_page('checkout') && get_theme_mod('hide_navigation_checkout')) {
} else {
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<a class="menu-toggle">
<?php _e('Menu', 'accesspress-store'); ?>
</a>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container_class' => 'store-menu',
'fallback_cb' => 'custom_fallback_menu',
)
);
?>
</nav><!-- #site-navigation -->
<?php } ?>
</div>
</div> <!-- right-header -->
</div> <!-- right-header-main -->
</div>
</div>
</section><!--Home Navigation-->
</header><!-- #masthead -->
<div id="content" class="site-content">
>> this is my header.php code
I am trying to add a div for social network widgets to the end of the footer on my website.The code works out on my desktop,but the contents alignment is changed when I test it on ipad,iphone and windows phone.Here is the code:
<div style="background-color: #1E2629;">
<div class="container">
<div class="row text-center">
<div>
<ul class="list-inline">
<li>
<div class="fb-like" style="overflow:hidden;" data-href="https://www.facebook.com/WebsitePage" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
<li>
<div>
Follow #CardInbox
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</div>
</li>
<li>
<div>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/FollowCompany" data-id="111111">
</script>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add media queries for each device screen size,
/* Ipad Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* your css code
.container {} */
}
/* iPhone 4/4s Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
/* your css code
.container {} */
}
/*5/5S */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
Windows phones comes in different screen size. So configure accordingly .
I am trying to edit my footer.php in my child-theme (localhost for now, no link to share) in a way that I won't loose the "powered by ..." text. The theme authors (and wordpress too) surely deserve to be referenced there with the great work they do.
I want to add a row with 3 sections, in-line, and above the "footer-menu" and "site-generator" that came with the template. Can you point where the html structure, or the css, is/are incorrect?
Here's what I added to my child-theme footer.php and style.css:
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<!-- New inserted code STARTS HERE -->
<div class="engage-row">
<div class="col-1">
<img src="http://localhost/apoise/wp-content/themes/virality-child/images/footer/campaigntest.jpg">
</div>
<div class="col-2">
<img src="http://localhost/apoise/wp-content/themes/virality-child/images/footer/about-engage.jpg">
</div>
<div class="col-3">
<!-- Will add a subscription form here -->
</div>
</div>
<!-- Newly inserted code ENDED HERE -->
<div class="footer-wfix">
<?php virality_footer_nav(); ?>
<div id="site-generator">
<?php echo __('© ', 'virality') . esc_attr( get_bloginfo( 'name', 'display' ) ); ?>
<?php if ( is_front_page() && ! is_paged() ) : ?>
<?php _e('- Powered by ', 'virality'); ?><?php `enter code here`_e('WordPress' ,'virality'); ?>
<?php _e(' and ', 'virality'); ?><?php _e('WP Dev Shed', 'virality'); ?>
<?php endif; ?>
</div>
</div>
In style.css I added:
.col-1{
display: inline;
float: left;
}
.col-2{
display: inline;
float: left;
}
.col-3{
display: inline;
float: left;
}
How can I keep the footer_nav and the site-generator in a new line under the new row I created? Right now they are extending to the right. Or is there a better way to do this?
In your css file you need to add
div.footer-wfix {
clear:left;
}
Should do the trick.