Display the text after 3 icons in header of the site - html

we are displaying text "a" using <p class="a123">a</p> in top left of the site as here
but i want to move text "a" to top right next to 3 icons.
we are using following code
<div id="header">
<header id="header" class="page-header">
<div class="page-header-container">
<!-- logo -->
<a class="logo" href="<?php echo $this->getUrl('') ?>">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" />
<img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" />
</a>
<!-- logo end-->
<!-- search bar image -->
<div id='hideshow'>
<img src="<?php echo $this->getSkinUrl('images/search_16.png');?>" alt="Search">
</div>
<!-- search bar image -->
<?php // In order for the language switcher to display next to logo on smaller viewports, it will be moved here.
// See app.js for details ?>
<div class="store-language-container"></div>
<div class="skip-links">
<div class="account-cart-wrapper">
<!-- account man image -->
<a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account">
<span class="icon"></span>
</a>
<!-- account man image end -->
<!-- Cart icon start-->
<div class="header-minicart">
<?php echo $this->getChildHtml('minicart_head'); ?>
</div>
<!-- Cart icon end-->
</div>
<?php
// echo $this->getLayout()->createBlock('page/switch')->setTemplate('page/switch/languages.phtml')->tohtml();
?>
<p class="a123">a</p>
</div>
<!-- Menu -->
<div id="header-nav" class="skip-content">
<?php echo $this->getChildHtml('topMenu') ?>
</div>
<!-- Menu end-->
<!-- Search -->
<div id="header-search" class="skip-content desktop-only">
<?php echo $this->getChildHtml('topSearch') ?>
</div>
<!-- Search end -->
<!-- Account -->
<div id="header-account" class="skip-content">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
<!-- Account end-->
</div>
<!--<div id="header-search" class="desktop-only">
<?php echo $this->getChildHtml('topSearch') ?>
</div>-->
</header>
<?php
// echo $this->getChildHtml('topContainer');
?>
</div>
please help me to find solution
Thanks in advance

.a123 {
position: absolute;
right: 0px;
top: 10px;
z-index: 999;
font-size: 30px;
}
I hope this will help you. Screenshot

.a123{
position: absolute;
top: 25px;
right: 0;
}
Adding this to your css file will position this at the top right of the page then you can change the top attribute to position this next to the icons if desired.

Related

Get first array data for view, the second data and others to another class view

I have an array data, for example array data like this:
[0, 1, 2, 3, 4];
I want to foreach array data to view. My first array data will place for headline, second data and others will place for list data. This is my view:
<div class="editor-choice">
<div class="headsection">EDITOR’S CHOICE</div>
<!-- Headline Editor Choice -->
<article class="headline-editor-choice">
<a href="https://www.sportstars.id/read/ole-gunnar-solskjaer-pelatih-man-united-terburuk-setelah-era-sir-alex-ferguson-48Gz3V">
<div class="img-headline-editor-choice">
<img src="https://img.sportstars.id/mpi/800//2021/11/48Gz3V/master_94xHM5T8r5_1941_ole_gunnar_solskjaer.jpg"
alt="img-news">
</div>
</a>
<div class="detail-headline-editor-choice">
Liga Inggris
<span class="date">22 November 2021 13:21 WIB</span>
<div class="title-article title-editor-choice-headline">
<a href="https://www.sportstars.id/read/ole-gunnar-solskjaer-pelatih-man-united-terburuk-setelah-era-sir-alex-ferguson-48Gz3V"
class="title" style="-webkit-box-orient: vertical;">Ole Gunnar Solskjaer Pelatih Man United Terburuk
Setelah
Era Sir Alex Ferguson</a>
</div>
</div>
</article>
<!-- List Editor Choice -->
<?php foreach ($editorchoice as $kuy => $val) { ?>
<article class="list-editor-choice">
<div class="img-editor-choice">
<a
href="<?php echo $val['link']; ?>">
<img src="<?php echo image_uri().'/okz/900/'.str_replace("thumb","master",#$val['image_content']); ?>"
alt="img-news">
</a>
</div>
<div class="detail-editor-choice">
<div class="title-article title-editor-choice">
<a href="<?php echo $val['link']; ?>"
class="title" style="-webkit-box-orient: vertical;"><?php echo $val['title']; ?></a>
</div>
<div class="warp-date-article">
<div class="ico-calendar"><img src="<?php echo base_url(); ?>assets/mobile/images/icon/calender.svg">
</div>
<div class="date-article">19 November 2021</div>
</div>
</div>
</article>
<?php } ?>
This is the example of editorchoice data (data from array):
How to make the first array data from $editorchoice to Headline Editor Choice, and second & others data in List Editor Choice?
I use Codeigniter 3
I solved this problem with this code:
<?php if(!empty($editorchoice)):?>
<!-- Editor Choice -->
<div class="editor-choice">
<div class="headsection">EDITOR’S CHOICE</div>
<!-- Headline Editor Choice -->
<article class="headline-editor-choice">
<a href="<?php echo $editorchoice[0]['link']; ?>">
<div class="img-headline-editor-choice">
<img src="<?php echo image_uri().'mpi/800/'.str_replace("thumb","master",$editorchoice[0]['image_content']); ?>" alt="img-news">
</div>
</a>
<div class="detail-headline-editor-choice">
<?php echo #$editorchoice[0]['channel_name']; ?>
<span class="date"><?php echo $editorchoice[0]['timeago']; ?></span>
<div class="title-article title-editor-choice-headline">
<?php echo $editorchoice[0]['title']; ?>
</div>
</div>
</article>
<!-- List Editor Choice -->
<?php $i = 0; foreach ($editorchoice as $key => $value) { ?>
<?php if(!empty($i)):?>
<article class="list-editor-choice">
<div class="img-editor-choice">
<a href="<?php echo $value['link']; ?>">
<img src="<?php echo image_uri().'mpi/800/'.str_replace("thumb","master",$value['image_content']); ?>" alt="img-news">
</a>
</div>
<div class="detail-editor-choice">
<div class="title-article title-editor-choice">
<?php echo $value['title']; ?>
</div>
<div class="warp-date-article">
<div class="ico-calendar"><img src="<?php echo base_url()?>assets/mobile/images/icon/calender.svg"></div>
<div class="date-article"><?php echo #$value['timeago']; ?></div>
</div>
</div>
</article>
<?php endif;?>
<?php $i++; } ?>
</div>
<!-- End Editor Choice -->
Thank you ..

Fix a Menu bar and Logo in WordPress [closed]

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

What is causing wrapper to break?

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...

Nested div ids - Having trouble with styling

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>

Top Menu bar not working in My Wordpress site

I have two meny=u bar in my site. 1st- top menu 2nd- primary menu.Top Menubar not working in my site.I input it from menu but not working. I use hostme theme. My site http://www.dewdropzone.asia . My topmenu bar header code. See this theme demo for understand what top menu bar not show my site . click here
<?php if(get_option("topblackmenu") == "true") { ?>
<div class="topmenu">
<div class="inner">
<!-- .top_menu -->
<?php if (has_nav_menu( 'top-menu' ) ) { wp_menu_functon(); }?>
</div>
</div>
<!-- .top_menu -->
<?php } ?>
<div class="clear"></div>
<div id="header">
<div class="inner">
<!-- logo -->
<div class="logo">
<?php if($s_logo){ ?>
<a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?>">
<img src="<?php echo $s_logo; ?>" alt="<?php bloginfo('name'); ?>" />
</a>
<?php } else { ?>
<a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?>">
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" />
</a>
<?php } ?>
</div>
<!-- logo -->
<div class="sec-menu">
<?php if (has_nav_menu( 'primary-menu' ) ) { wp_primary_menu_functon(); }
else{
echo('<ul class="nav"><li>'.__('Go to WP-admin Appearance Menus and assign menu location', 'hostme_front').'</li></ul>');
} ?>
</div>
<!-- topmenu -->
</div>
</div><!-- topbar -->
<div class="clear"></div>
I'm sorry for adding an answer, but I don't see an option to comment in the question. Am I missing something?
Did you create your navigation through the Appearance>Menus in your Dashboard?
Make sure that you select the menu you have created as your 'Header Menu'.