So I've tried adding a phone number to the correct places on my site, but it's not styling correctly. The problem I'm running into is the mobile display. The logo will not center, and the phone number is not showing inline in the navbar.
What I'm trying to achieve:
desktop mobile
What I have:
http://lakeozarkelectrician.com/
CSS:
// -------------- Mobile -------------- //
#media screen and (max-width: 480px) {
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.img-fluid {
display: block;
margin: 0 auto;
}
a[href^="tel:"] {
color: white;
text-decoration: none;
float: none;
}
}
// ------------- Telephone Styling ------------ //
#telephone {
text-align: center;
margin-top: 15px;
font-size: large;
float: right;
}
a[href^="tel:"] {
color: black;
text-decoration: none;
display: inline;
}
Header:
<body <?php body_class(); ?>>
<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 d-block hidden-md">
<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; ?>
<span class="navbar-text d-inline-block d-sm-none">
<i class="fa fa-phone"></i>
636-244-9045
</span>
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
</div>
</header>
</div>
You can try with this :
#media screen and (max-width: 480px) {
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
margin-left: auto; // <-- add this
margin-right: auto; // <-- add this
display: table; // <-- add this
}
#telephone{display:none;} // <-- add this
.navbar > .container + span{ // <-- add this
position: absolute; // <-- add this
right: 15px; // <-- add this
top: 10px; // <-- add this
} // <-- add this
}
sorry because i know that its old but may useful
u can false container like below and add what ever you want
<div id="navbarNavDropdown" class="collapse navbar-collapse"><?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?><span class="nav-item">MY NEW ITEM</span></div>
Related
I have this website and my problem is with the language switcher on top.
As you can see from the screenshots, when the width is between 768 - 990 px the top bar disappears.
With top bar at 1175px x 621px
Without top bar at 896px x 489px
I have tried many css tricks that i found online, like
-webkit-transform: translate3d(0, 0, 0);
but i still have the same result
The HTML code is the menu from the website. I think the problem is being created by the class="style2"
P.S. At line 6315 of the css you can see the
#media (min-width: 768px) {...}
but i can't figure if something contributes to my problem.
<?php if((get_theme_mod('andaman_top_contact') || get_theme_mod('andaman_menu_soc')) == true) { ?>
<div class="header style2">
<div class="top_bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-9 col-sm-12 col-xs-12">
<?php if(get_theme_mod('andaman_top_contact') == true) { ?>
<ul class="contacts-top">
<?php if(get_theme_mod('andaman_top_contact_address', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_address', '455 Martinson, Los Angeles')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_phone', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_phone', '+1 (043) 567-8930')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_hours', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_hours', 'Mon-Sut: 10 AM-8 PM')); ?></li><?php }; ?>
</ul>
<?php }; ?>
</div>
<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
<ul class="soc-top">
<?php if ( is_plugin_active( 'polylang/polylang.php' )) { ?>
<li class="lang"><span><img src="<?php echo get_stylesheet_directory_uri(). '/assets/images/lang-' . pll_current_language('slug') . '.png'; ?>" width="24" height="24" alt=""> <?php echo pll_current_language('name'); ?></span>
<ul class="lang-ul">
<?php $languages = pll_the_languages( array('raw'=> true, 'hide_if_no_translation'=>true, 'hide_current'=>true) );
foreach ($languages as $language ) {
echo '<li><img src="'.get_stylesheet_directory_uri(). '/assets/images/lang-'.$language['slug'].'.png" width="24" height="24" alt="'.$language['slug'].'">' .$language['name'].'</li>'; }; ?>
</ul>
</li>
<?php }; ?>
</ul>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="header style2 no-bar">
<?php };?>
<div class="sticky-menu">
<div class="container">
<div class="menu-flex">
<div class="logo">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">
<?php if(get_theme_mod('andaman_logo_upload', 'enable') == true) { ?>
<img src="<?php echo esc_url(get_theme_mod('andaman_logo_upload', get_template_directory_uri() . '/assets/images/logo.png')); ?>" alt="<?php the_title_attribute(); ?>" style="height: <?php echo esc_attr(get_theme_mod('andaman_logo_height', '45px')); ?>;">
<?php } else { ?>
<h1 style="margin:0;"><?php echo the_title(); ?></h1>
<?php } ?>
</a>
</div>
<?php if(get_theme_mod('andaman_menu_select', 'standard') == 'standard') { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'container' => false,
'menu_class' => 'nav navbar-nav',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'menu_class' => 'burger_andaman_main_menu',
'depth' => 3,
)); ?>
</div>
</div>
</div>
<?php } else { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'container' => false,
'menu_class' => 'nav navbar-nav share-class',
'menu_id' => 'menu-onepage',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'menu_class' => 'burger_andaman_main_menu share-class',
'menu_id' => 'menu-onepage',
'depth' => 1,
)); ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
This is happening because one of your stylesheet hiding the li.lang between mentioned width, I have provided you CSS, you can paste it inside the stylesheet.
#media screen and (max-width:990px){
li.search, li.lang {
display: block !important;
}
}
Screenshot of your CSS: (You have to change display: none to display: block)
Thank you #Gamers Agenda for your quick and accurate answer.
The changes I made with your help:
#media screen and (max-width:990px){
.soc-top {
float: right;
margin-right: 30px;
}
li.search, li.lang {
display: block !important;
}
}
This will do:
Your style:
#media (max-width: 767px)
.header.style2 .soc-top {
float: none !important;
text-align: center;
}
remove float: none !important; and be like:
#media (max-width: 767px)
.header.style2 .soc-top {
text-align: center;
}
I cannot for the life of me
figure out why my footer is showing up in the middle of my webpage. I have my #content div set to have a height of 100% and have given it a relative position; and I even added an absolute position to my footer with bottom: 0;. What am I missing? I can't figure out what is causing it to not follow the normal flow of elements in the page!
I've checked several posts with this same problem, but the suggestion is almost always what I've tried above. I did try getting rid of the position for #content and the footer and instead setting display: inline-block; for both (was suggested in another post), and that didn't do anything.
Link to my in-progress page: http://freshcardsite.thewelllovedlife.com/home-use/
HTML for the Page (starting below the header):
<div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main consumer-page" role="main">
<?php
// vars
$topsection = get_field('consumer_top_image_section');
if( $topsection ): ?>
<div class="top-image" style="background-image: url(<?php echo $topsection['consumer_background_image']; ?>); background-size: cover; background-repeat: no-repeat; background-position: bottom center;">
<div class="top-section">
<div class="top-text">
<h1>Fresh Card</h1>
<p><?php echo $topsection['consumer_top_content']; ?></p>
<img src="<?php echo $topsection['consumer_top_icon']; ?>" />
</div>
</div>
</div>
<?php endif; ?>
<?php
// vars
$aboutsection = get_field('consumer_about_section');
if( $aboutsection ): ?>
<div class="about-section">
<div class="about-content">
<h2><?php echo $aboutsection['consumer_about_section_title']; ?></h2>
<p><?php echo $aboutsection['consumer_about_section_main_content']; ?></p>
</div>
<?php if($aboutsection['consumer_uses_section'] ): ?>
<div id="tabs">
<ul class="tabs">
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<li><h3><?php echo $use['consumer_use_name']; ?></h3><img src="<?php echo $use['consumer_use_icon']; ?>" /></li>
<?php endforeach; ?>
</ul>
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<div id="<?php echo $use['consumer_use_number']; ?>">
<p> <?php echo $use['consumer_use_information']; ?> </p>
<p> <?php echo $use['consumer_use_video']; ?</p>
<p> <?php echo
$use['consumer_second_use_video']; ?> </p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contact-section">
<div class="contact-content">
<h2>Contact Us</h2>
<?php the_field('consumer_contact_section'); ?>
</div>
</div>
<?php if (have_posts() ) : ?>
<div class="news-section">
<div class="news-content">
<h2>Awards & News</h2>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?>
</a></li>
<li><?php the_excerpt(__('(more…)')); ?></li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<?php else : ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="
<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
And here's my relevant CSS
html, body {
height: 100%;
}
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
#content {
position: relative;
height: 100%;
min-height: 100%;
}
footer#colophon {
position: absolute;
bottom: 0;
}
Your main problem is that .consumer-page is getting a position:absolute and its messing with your elements heights
Lets try the next classes:
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: initial;
left: 0;
top: 0;
}
.wrap {
padding: 0;
width: 100vw;
max-width: 100vw;
margin: 0;
}
#content {
padding: 0;
}
footer#colophon {
position: initial;
bottom: 0;
}
Hope this helps. If you run into problems, pliss coment on this answer and will happily edit
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.
I'm not sure how to centre a doubleclick ad horizontally. After reading this similar question Centre align leaderboard ad, I'm using this code now
<div class="center">
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
AD CODE
</div>
But it doesn't work. Any ideas?
To clarify, the ad is being used on this website. http://worldgreendaily.com/
The total code on the page is:
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$page_layout = get_option(THEME_NAME."_page_layout");
//logo settings
$logo = get_option(THEME_NAME.'_logo');
$search = get_option(THEME_NAME.'_search');
//top banner
$topBanner = get_option(THEME_NAME."_top_banner");
$topBannerCode = get_option(THEME_NAME."_top_banner_code");
//fixed menu
$menuStyle = get_option(THEME_NAME."_menu_style");
$weatherSet = get_option(THEME_NAME."_weather");
$weather = OT_weather_forecast($_SERVER['REMOTE_ADDR']);
// header social icons
$socialHeader = get_option(THEME_NAME."_social_header");
$vimeo = get_option(THEME_NAME."_vimeo");
$twitter = get_option(THEME_NAME."_twitter");
$facebook = get_option(THEME_NAME."_facebook");
$googlepluss = get_option(THEME_NAME."_googlepluss");
$pinterest = get_option(THEME_NAME."_pinterest");
$tumblr = get_option(THEME_NAME."_tumblr");
$linkedin = get_option(THEME_NAME."_linkedin");
$dribbble = get_option(THEME_NAME."_dribbble");
$soundcloud = get_option(THEME_NAME."_soundcloud");
?>
<!-- BEGIN .boxed -->
<div class="boxed<?php echo $page_layout=="boxed" ? " active" : false; ?>">
<!-- BEGIN .header -->
<div class="header">
<!-- BEGIN .header-very-top -->
<div class="header-very-top">
<!-- BEGIN .wrapper -->
<div class="wrapper">
<div class="left">
<?php
if ( function_exists( 'register_nav_menus' )) {
$walker = new OT_Walker_Top;
$args = array(
'container' => '',
'theme_location' => 'top-menu',
'items_wrap' => '<ul class="ot-menu very-top-menu load-responsive" rel="'.__("Top Menu", THEME_NAME).'"><li><i class="fa fa-home"></i></li>%3$s</ul>',
'depth' => 3,
'walker' => $walker,
"echo" => false
);
if(has_nav_menu('top-menu')) {
echo wp_nav_menu($args);
}
}
?>
</div>
<?php if($weatherSet=="on") { ?>
<?php if(!isset($weather['error'])) { ?>
<div class="right">
<div class="weather-report">
<span><?php _e("Weather",THEME_NAME);?></span>
<b><?php echo $weather['country'].', '.$weather['city'];?></b>
<img src="<?php echo THEME_IMAGE_URL.$weather['image'];?>.png" alt="<?php echo $weather['country'].', '.$weather['city'];?>" />
<font class="weather-meter" style="background: <?php echo $weather['color'];?>;"><?php echo $weather['temp_'.get_option(THEME_NAME."_temperature")];?></font>
</div>
</div>
<?php
} else {
echo $weather['error'];
}
?>
<?php } ?>
<div class="clear-float"></div>
</div>
<div class="double-split"></div>
<!-- END .header-very-top -->
</div>
<!-- BEGIN .header-middle -->
<div class="header-middle">
<div class="wrapper">
<?php if($logo) { ?>
<div class="logo-image">
<h1><?php bloginfo('name'); ?></h1>
<img class="logo" src="<?php echo $logo;?>" alt="<?php bloginfo('name'); ?>" />
</div>
<?php } else { ?>
<div class="logo-text">
<h1><?php bloginfo('name'); ?></h1>
</div>
<?php } ?>
<?php if($topBanner=="on") { ?>
<div class="banner">
<div class="banner-block">
<?php echo stripslashes(do_shortcode($topBannerCode));?>
</div>
<?php if (is_pagetemplate_active("template-contact.php")) { ?>
<?php $contactID = ot_get_page('contact'); ?>
<div class="banner-info">
<span class="icon-default"> </span><?php _e("Sponsored Advert", THEME_NAME);?><span class="icon-default"> </span>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="clear-float"></div>
</div>
<!-- END .header-middle -->
</div>
<!-- BEGIN .header-menu -->
<div class="header-menu<?php if($menuStyle=='on') { echo ' thisisfixed'; } ?>">
<div class="wrapper">
<?php
wp_reset_query();
if ( function_exists( 'register_nav_menus' )) {
$walker = new OT_Walker;
$args = array(
'container' => '',
'theme_location' => 'middle-menu',
'items_wrap' => '<ul class="%2$s main-menu" >%3$s</ul>',
'depth' => 3,
"echo" => false,
'walker' => $walker
);
if(has_nav_menu('middle-menu')) {
echo wp_nav_menu($args);
} else {
echo "<ul class=\"main-menu\"><li class=\"navi-none\">Please set up ".THEME_FULL_NAME." menu!</li></ul>";
}
}
?>
<?php if($search=="on") { ?>
<div class="right menu-search">
<form method="get" action="<?php echo home_url(); ?>" name="searchform" >
<input type="text" value="" placeholder="<?php _e("Search something..",THEME_NAME);?>" name="s" id="s"/>
<input type="submit" class="search-button" value=" " />
</form>
</div>
<?php } ?>
<div class="clear-float"></div>
</div>
<!-- END .header-menu -->
</div>
<!-- BEGIN .header-undermenu -->
<div class="header-undermenu">
<div class="wrapper">
<?php
if ( function_exists( 'register_nav_menus' )) {
$args = array(
'container' => '',
'theme_location' => 'third-menu',
"link_before" => '<i>',
"link_after" => '</i>' ,
'items_wrap' => '<ul class="secondary-menu" >%3$s</ul>',
'depth' => 1,
"echo" => false
);
if(has_nav_menu('third-menu')) {
echo wp_nav_menu($args);
}
}
?>
<div class="clear-float"></div>
</div>
<!-- END .header-undermenu -->
</div>
<!-- END .header -->
</div>
<?php wp_reset_query(); ?>
<div style="text-align: center; margin: 0 auto;"><!-- Test_WGD -->
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1419519536676-0'); });
</script></div>
</html>
If you put your css on the page instead of linking to an external css file you should be putting it inside the <head></head> tags. Your document should look something like this:
<html>
<head>
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center">AD CODE</div>
</body>
</html>
you can also use inline styling (which I would not recommend) if you wanted the styles near the div like your example:
<div style="text-align: center; margin: 0 auto;">AD CODE</div>
UPDATE
This is being pulled in from an iframe. What you need to do is find the id that I have pointed out in the below image:
Which is this:
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
and add margin: auto to it, like so:
<div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px; margin: auto;'>
That should center your image
div and style tags must be replaced.
<html>
<head>
<style type="text/css">
.center {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="center">
AD CODE
</div>
</body>
</html>
I am trying to style a div that is nested in some ofter divs and having some trouble. Below is the code and css I am attempting to use. If you could show me the correct css tag to style the element called #cleanse I would appreciate it.
<!-- Header starts here -->
<header id="header">
<div class="align">
<!-- Logo start here -->
<div id="logo">
<?php if(get_option( 'ms_plain_logo')=="true" ) { ?>
<h1><a class="text_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"><?php echo get_bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h1><a class="img_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"></a></h1>
<?php } ?>
</div>
<!-- Logo ends here -->
<!-- Navbar -->
<?php $args=array(
'theme_location'=>'primary-navigation',
'container' => 'nav',
'container_id' => 'navigation-wrapper',
'menu_id' => 'navigation',
'fallback_cb' => false
); ?>
<?php wp_nav_menu($args); ?>
<?php if(!has_nav_menu( 'primary-navigation')) { ?>
<nav id="navigation-wrapper">
<ul id="navigation">
<?php wp_list_pages( 'title_li=&sort_column=menu_order'); ?>
</ul>
</nav>
<?php } ?>
<!-- Navbar ends here -->
<div id="cleanse">
<a href="link" target="_blank">
<img src="img"/></a>
</div>
</div>
</header>
<!-- Header ends here -->
#cleanse { top: 55px; }
What do want to do? Add a margin-top or something?
This only works with position:
#cleanse { top: 55px; }
Try this:
#cleanse { margin-top: 55px; }
Also the css should be placed in the header:
<style>
/* your rules here */
</style>