Top Menu bar not working in My Wordpress site - html

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

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

Display the text after 3 icons in header of the site

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.

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>

Div tag being prematurely closed

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.