I have a Wordpress site which utilizes Bootstrap 3 and a Jumbotron header. I have a parallax effect on the nav and background which work using skrollr.js.
I have it set at different sizes for media Query (768px). 40% height for screen sizes above 768px. 25% for screen sizes smaller.
Right now the Jumbotron 'jumps' to the different sizes when the screen changes. I would like it to change sizes gradually as the screen shrinks and stretches. I would typically use percentages to accomplish this, but when I put 'min height: 40%' the height of the jumbotron goes to 0.
header html
<div class="container-fluid">
<div class="jumbotron" data-0="background-position:0px -50px;" data-350="background-position:0px 100px;">
<header id="skrollr-body">
<nav class="navbar navbar-custom" role="navigation" data-0="opacity: 1" data-50="opacity: 0">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand">
<?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
<a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
<?php } else { ?>
<h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php } ?>
</div>
</div>
...
css is
.jumbotron {
min-height: 40%;
text-align: center;
margin: 0px;
padding: 30px 40px;
background: url('../img/homeBG.jpg') no-repeat center center;
background-size: 100%;
background-color: #f4f4f5;
}
Use CSS transitions. Add a transition to each of your media specific .jumbotron CSS, like so
...media query... {
.jumbotron {
transition: min-height 1s;
min-height: 40%;
....rest of css...
}
}
Related
Can anybody help me get to the bottom of this?
I have icons for several post types that will be appearing across the screen, the whole thing is supposed to look like this on the page if I can get the icons to show up:
The farthest I have gotten is having every thing BUT the icons on display, here's why:
This is what puts the icons on the page. It's a custom field with some radio buttons for names and the values coordinate to class names in the HTML tags for the icons.
<div class="section-header">
<!-- If user uploaded an image -->
<?php if( !empty($features_section_image) ) : ?>
<img src="<?php echo $features_section_image['url']; ?>" alt="<?php echo $features_section_image['alt']; ?>">
<?php endif; ?>
<h2><?php echo $features_section_title; ?></h2>
<!-- If user added body text -->
<?php if( !empty($features_section_body) ) : ?>
<p class="lead"><?php echo $features_section_body; ?></p>
<?php endif; ?>
</div><!-- section-header -->
<div class="row">
<?php $loop = new WP_Query( array( 'post_type' => 'course_feature', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-sm-2">
<i class="<?php the_field('course_feature_icon'); ?>"></i>
<h4><?php the_title(); ?></h4>
</div><!-- end col -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- row -->
</div><!-- container -->
</section><!-- course-features -->
The html classes are then taken by the CSS file and specified.
/* === CUSTOM ICON SPRITES === */
i.ci {
display: inline-block;
height: 40px;
width: 40px;
background: url('/wp-content/themes/Bootstrap2WordPress/bootstrap2wordpress/assets/img/icon-sprite.png') no-repeat;
}
.ci.ci-computer { background-position: 0 0; }
.ci.ci-watch { background-position: -40px 0; }
.ci.ci-calendar { background-position: -80px 0; }
.ci.ci-community { background-position: -120px 0; }
.ci.ci-instructor { background-position: -160px 0; }
.ci.ci-device { background-position: -200px 0; }
The background for the icon's class assigns the background image url to all the icons, this is because the background is a sprite sheet and the CSS for the individual CSS classes crop all the other sprites out of the sprite sheet. It's a ridiculously complicated way of doing it, I know, but I've got to do it this way.
So, I try it out and I get this.
What do I do?
Use background-image:url(); instead of just background:;
update: It is most likely the lack of url() and not the fact that you used background versus background-image
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 months ago.
I like to make the header full width across the screen, the wrapper is 1052px and want to extend that while the logo and the menu stay in place.
Is there a way to expand the inner div to the full screen width in a responsive layout?
How can I fix this with css keeping in mind that "menu" is fixed at top and "full width" div must scroll normally? I think I cannot use absolute positioning. I hope it's clear, otherwise I'll try to improve the question.
here is the header.php code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class() ?>>
<div id="wrapper">
<div id="inner-wrap">
<div id="header" class="fullwidth">
<div id="logo">
<?php if (!option::get('misc_logo_path')) { echo "<h1>"; } ?>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
<?php if (!option::get('misc_logo_path')) { bloginfo('name'); } else { ?>
<img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo('name'); ?>" />
<?php } ?>
</a>
<div id="header-amp"></div>
<?php if (!option::get('misc_logo_path')) { echo "</h1>"; } ?>
</div><!-- / #logo -->
<nav class="main-navbar" role="navigation">
<div class="navbar-header">
<?php if (has_nav_menu( 'primary' )) { ?>
<a class="navbar-toggle" href="#menu-main-slide">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php wp_nav_menu( array(
'container_id' => 'menu-main-slide',
'theme_location' => 'primary'
) );
} ?>
</div>
<div id="navbar-main">
<?php if (has_nav_menu( 'primary' )) {
wp_nav_menu( array(
'menu_class' => 'nav navbar-nav dropdown sf-menu',
'theme_location' => 'primary'
) );
} ?>
</div><!-- #navbar-main -->
</nav><!-- .navbar -->
<div class="clear"></div>
<div class="clear"></div>
</div><!-- / #header-->
<div id="main">
#inner-wrap{
width: 100vw; /* make it 100% of the viewport width (vw) */
margin-left: calc((100% - 100vw) / 2); /* then remove the gap to the left of the container with this equation */
}
The left margin equation is the key to get full width inside a container.
First, I get the total size of the container gap in a negative number (so the margin can be negative): 100% of the container - window size ( 100% - 100vw).
And last, I divide in half (the result above is for both left and right sides, so I just need the size of the left).
In summary, I'm making the inner-wrap width the same as the viewport width, then pull it to the left without using position:absolute or position:fixed, which would break the layout if you need more content below it.
You may need to adjust the parent if the 100% of the calc doesn't get the right size. position:relative can help.
#inner-wrap{
width: 100vw;
position: absolute;
height: 100%;
margin-left: 50%;
transform: translateX(-50vw);
}
This is another option for a full-width container using absolute positioning. The parent item must be set to position: relative;
mobileI've looked everywhere for centering a logo on mobile in WordPress, and I can't find anything. Here's what I've styled...
I also want the phone number to move into the navbar on mobile, but one step at a time, right? Any help is greatly appreciated...
Updated with more code. My apologies. I'm not sure if my media query is evey applying. I tested on Firefox and it only shows two of the four styles I've used. Is that normal? The float right and font-size aren't being displayed.
I hope if I can nail this down the other site section will be easier. I do everything in WordPress and I like the functionality. I also want to understand the CSS before I try tackling PHP, if that makes sense.
#media screen and (max-width: 480px) {
a[href^="tel:"] {
color: black;
text-decoration: none;
float: none;
}
.navbar-brand {
margin: 0 !important;
}
}
// ------------- Telephone Styling ------------ //
#telephone {
text-align: center;
margin-top: 15px;
font-size: large;
float: right;
}
a[href^="tel:"] {
color: black;
text-decoration: none;
display: inline;
}
<div class="hfeed site" id="page">
<!-- ******* Header ******* -->
<header>
<div class="wrapper-fluid">
<!-- Your site title as branding in the menu -->
<div class="container">
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
<!-- end custom logo -->
<div class="col-md-6">
<div id="telephone">
<p>Call Now<br>
<i class="fa fa-phone"></i>
636-244-9045</p>
</div>
</div>
</div>
</div>
<!-- ******************* The Navbar Area ******************* -->
<div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">
<a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
'understrap' ); ?></a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
</div>
</div>
</header>
Try:
.navbar-brand {
display: block;
text-align: center;
}
I checked your website and I got your problem.
You have for .navbar-brand this code :
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
And problem is with display: inline-block; and margin-right: 1rem; these two are stopping your action to center logo.
So replace .navbar-brand like this :
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
And code to center the logo inside .img-fluid :
display: block;
margin: 0 auto;
This works for sure. Hope you understand.
The background image is not showing. I must be missing something but going a bit cross-eyed trying to work out what it is.
This is what I have:
<div class="hero_text item">
<h3><?php echo $slide['slide_title']; ?></h3>
<p>
<?php echo $slide[ 'slide_desc']; ?>
</p>
<img style="background-image:url(<?php echo $slide['slide_image']; ?>)"></img>
</div>
And this is the CSS:
.hero_text img {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 600px;
}
I think you want to use:
<img src="<?php echo $slide['slide_image']; ?>" />
The img tag is for adding images to HTML.
If you actually want it as a background image, set it on a div:
<div style="background-image:url('<?php echo $slide['slide_image']; ?>')"></div>
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