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
Related
I want to add a picture above the footer as seen picture below, or you can visit the website: http://creativelab.twofour54.com/en/
Example of the photo from TwoFour54
The website I'm testing it on is wordpress. I tried playing with the footer.php however it works nicely but when I stretch the site (zoom out or in) It gets ruined. I tried to make it static with position tag from CSS but that didnt work.
<div class="cfa" style="margin-left: 200px; width: 100%; z-index: 10;">
<div class="container">
<div class="col-sm-12">
<img src="http://localhost:8080/TESTWORDPRESS/wp-content/uploads/2017/01/Sketch-Book-icon.png">
</div>
</div>
</div>
<?php
/*
Template for Footer
*/
?>
<footer id="footer">
<div class="row clearfix">
<?php
if ( ! dynamic_sidebar ( 'footer_widgets' ) ){
thdglkr_emptysidebar('Footer');
}
?>
</div><!-- row -->
<?php if (_option('footer_menu','1')=='1'){ ?>
<div class="footer-last row mtf clearfix">
<span class="copyright"><?php echo _option('footer_text'); ?></span>
<?php
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu' => 'Footer Menu',
'container' => 'div',
'container_class' => '' ,
'menu_class' => 'foot-menu',
)
);
}else{?>
<div class="footer-last row mtf clearfix center">
<span class="copyright center"><?php echo _option('footer_text'); ?></span>
<?php } ?>
</div><!-- end last footer -->
</footer><!-- end footer -->
</div><!-- end layout -->
</div><!-- end frame -->
<?php if (_option('footer_gototop')==1): ?>
<div id="toTop"><i class="icon-angle-up"></i></div><!-- Back to top -->
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
note: code above is Footer.php from my test local host
Does anyone have any ideas?
Put your .cfa inside your footer in your html. And in your css:
.cfa {
position: absolute;
top: 0;
left: 200px;
margin-top: -100px; //change this to the height of your image
}
EDIT: Actually it's better if you can remove it from your HTML and just add it via css using a :before pseudo-element if you're using it just for design purposes.
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.
I'm not sure if I should post this in wordpress stack but if you go to the single.php
on my custom wordpress theme, you'll see that if you make your browser roughly less than 1200 pixels wide, you are able to horizontally scroll to the right. There should be no extra space to allow the horizontal scroll as the page content is in a wrapper div.
I have viewed the source and it appears that the content generated by wordpress through the_content() is creating divs that break the wrapper?
Here is the code for single.php Once again when I remove <?php the_content(); ?> the structural problem is not there.
<?php get_header(); ?>
<div class="page-section clear">
<!-- post thumbnail -->
<div class="single-image-anchor">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a class="single-image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" style="background-image: url('<?php echo $image[0]; ?>')">
</a>
<?php endif; ?>
</div>
<!-- /post thumbnail -->
<div class="container clear">
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="wrapper">
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post title -->
<h1 class="single-title">
<?php the_title(); ?>
</h1>
<!-- /post title -->
<!-- post details -->
<span class="single-date"><?php the_time(get_option('date_format')); ?></span>
<div class="single-text">
<?php the_content(); ?>
<br />
<a href="<?php echo get_permalink(18); ?>" class="back-article">
<i class="fa fa-arrow-circle-left"></i> News
</a/>
</div>
</article>
<!-- /article -->
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
</div>
<?php get_footer(); ?>
it's the facebook share buttons. The span wrapping it and the iframe are currently set to a width of 900px:
<span style="vertical-align: bottom; width: 900px; height: 25px;">
<iframe name="f2a1624528" width="900px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=1526849080927795&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F7r8gQb8MIqE.js%3Fversion%3D41%23cb%3Dfa87d2a78%26domain%3Dmichaeljeromeinprogress.themichaelsanger.com%26origin%3Dhttp%253A%252F%252Fmichaeljeromeinprogress.themichaelsanger.com%252Ff291a9dcc8%26relation%3Dparent.parent&href=http%3A%2F%2Fmichaeljeromeinprogress.themichaelsanger.com%2Fnye-bte-shows-on-sale-now%2F&locale=en_US&ref=below-post&sdk=joey&share=true&width=900" style="border: none; visibility: visible; width: 900px; height: 25px;" class=""></iframe>
</span>
set them to like 100px since those buttons are small anyways.
Whenever you get problems like this, do this:
div { border: 1px solid red }
Then look at all the div blocks inside the page. Take note on the one's that are touching the right edge.
If you go into Chrome, you can delete the element node. When I deleted the fb social plugin nodes, the horizontal scroll bar went away. So look into that...
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>
I'm working on a new webpage for my blog # http://bornsquishy.ca
I'm also trying to use a grid system by http://gridiculo.us/
The problem that I'm having is the div class "grid" is being closed off at the end of the header without a closing div tag, and I can't seem to figure out why this is happening.
Here is the code from the header.php after the closing head tag:
<body <?php body_class(); ?>>
<div id="main"><!-- this encompasses the entire Web site -->
<header id="header">
<div class="grid">
<div class="row">
<div class="c3">
<div class="logo">
<?php if(of_get_option('logo_type') == 'text_logo'){?>
<?php if( is_front_page() || is_home() || is_404() ) { ?>
<h1><?php bloginfo('name'); ?></h1>
<?php } else { ?>
<h2><?php bloginfo('name'); ?></h2>
<?php } ?>
<?php } else { ?>
<?php if(of_get_option('logo_url') != ''){ ?>
<img src="<?php echo of_get_option('logo_url', "" ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
<?php } ?>
<?php } ?>
</div><!-- .logo -->
</div><!-- .c3 -->
<div class="c8">
<nav class="primary">
<div class="menu-holder">
<div class="menu-left">
<div class="menu-right">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</div><!--.menu-right-->
</div><!--.menu-left-->
</div><!--.menu-holder-->
</nav><!--.primary-->
</div><!--.c8-->
<div class="c1 end">
<div id="rss-feed">
<img src="/images/rss-logo.png">
</div><!--.rss-feed-->
</div><!-- .c1 end-->
</div><!-- .row -->
<div class="row">
<div class="c8">
<div class="title">
<img src="/images/title.png">
</div><!--.title-->
</div><!--.c8-->
<div class="c4 end">
<div id="widget-header">
<?php if ( ! dynamic_sidebar( 'Header' ) ) : ?>
<!-- Widgetized Header -->
<?php endif ?>
</div><!--#widget-header-->
</div><!-- .c4 end -->
</div><!-- .row -->
<!--.grid left open-->
</header>
<!--#main left open-->
Let me know if more code/info is needed to answer this question.
Your comments say <!--.grid left open-->, does this mean you want to close the div.grid element after the closing </header>? If so, you can't do that because the div was opened inside the header, so it must be closed before the header is closed. HTML elements can't "overlap" each other.
If you're using Chrome developer tools or similar to inspect the markup, the browser will have seen the error and "fixed" your HTML structure in order to display it.
You either need to put the opening div before or after the header, or close the div before the end of the header.