Ask your WordPress questions! Pay money and get answers fast! (more info)

Move button to nav bar (WP menu) WordPress

  • SOLVED

Hello,

Would like a button [shortcode] moved to the navigation area to save space.

See screenshot: http://screencast.com/t/9q3MpCxUhX

header.php

<div class="wrapper">

<?php woo_header_before(); ?>

<header id="header" class="col-full">
<?php woo_header_inside(); ?>

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php if ( is_woocommerce_activated() && isset( $woo_options['woocommerce_header_cart_link'] ) && 'true' == $woo_options['woocommerce_header_cart_link'] ) { ?>
<nav class="nav cart">
<?php woo_cart_link(); ?>
</nav>
<?php } ?>
<span class="nav-toggle"><a href="#navigation"><span><?php _e( 'Navigation', 'woothemes' ); ?></span></a></span>
</hgroup>

<?php woo_nav_before(); ?>
<!-- custom widget -->
<div align="right"><?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar("above-nav") ) : endif; ?></div>


</header><!-- /#header -->

</div><!--/.wrapper-->

<nav id="navigation" class="col-full" role="navigation">

<div class="main-nav-inner">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>

<?php woo_nav_after(); ?>

</div><!--/.main-nav-inner-->

</nav><!-- /#navigation -->

<?php woo_content_before(); ?>



Theme called Peddlar from WooThemes. Added a custom widget area for the button shortcode. If you have a better idea, please let me know. Thank you.

Answers (4)

2013-06-22

Giri answers:

Try this code


<div class="wrapper">



<?php woo_header_before(); ?>



<header id="header" class="col-full">

<?php woo_header_inside(); ?>



<hgroup>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>

<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

<?php if ( is_woocommerce_activated() && isset( $woo_options['woocommerce_header_cart_link'] ) && 'true' == $woo_options['woocommerce_header_cart_link'] ) { ?>

<nav class="nav cart">

<?php woo_cart_link(); ?>

</nav>

<?php } ?>

<span class="nav-toggle"><a href="#navigation"><span><?php _e( 'Navigation', 'woothemes' ); ?></span></a></span>

</hgroup>



<?php woo_nav_before(); ?>

<!-- custom widget -->







</header><!-- /#header -->



</div><!--/.wrapper-->



<nav id="navigation" class="col-full" role="navigation">



<div class="main-nav-inner">

<?php

if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {

wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) );

} else {

?>

<ul id="main-nav" class="nav">

<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>

<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>

<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>

</ul><!-- /#nav -->

<?php } ?>

<div align="right"><?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar("above-nav") ) : endif; ?></div>

<?php woo_nav_after(); ?>



</div><!--/.main-nav-inner-->



</nav><!-- /#navigation -->



<?php woo_content_before(); ?>


Creativira comments:

Good work, Giri. Almost there with your code: http://screencast.com/t/PxEccR1A

Just need the button to look like it does on the first screenshot. Thank you.


Creativira comments:

http://cabinethaus.viracreativesolutions.com/preview$


Giri comments:

Use it in your custom.css file

.main-nav-inner .textwidget a.button {
background: #ae7f3b;
}
.main-nav-inner .textwidget a.button:hover {
background: #9b7135;
}
.main-nav-inner .textwidget a.button {
display: inline-block;
padding: .875em 1.416em;
color: white;
text-align: center;
text-decoration: none;
font-size: 1em;
font-family: inherit;
cursor: pointer;
overflow: visible;
width: auto;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
font-weight: bold;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "lato", sans-serif;
text-shadow: none;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #77cb6d;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.main-nav-inner .textwidget a.button {
color: white;
text-align: center;
font-size: 1em;
font-family: inherit;
cursor: pointer;
line-height: 1;
white-space: nowrap;
font-weight: bold;
font-family: "lato", sans-serif;
text-shadow: none;
}


Giri comments:

Also add this code too..

.main-nav-inner .textwidget a.button {
margin-top: 10px;
}


Giri comments:

Please note: you have to edit

cabinethaus/custom.css

Also note.. you should add those codes at the bottom of that file


Creativira comments:

Added; no change.


Giri comments:

Sorry little change. I used wrong class name

Try this code

.main-nav-inner .textwidget a.woo-sc-button {

background: #ae7f3b;

}

.main-nav-inner .textwidget a.woo-sc-button:hover {

background: #9b7135;

}

.main-nav-inner .textwidget a.woo-sc-button {

display: inline-block;

padding: .875em 1.416em;

color: white;

text-align: center;

text-decoration: none;

font-size: 1em;

font-family: inherit;

cursor: pointer;

overflow: visible;

width: auto;

line-height: 1;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

white-space: nowrap;

font-weight: bold;

border: 0;

-webkit-box-shadow: none;

box-shadow: none;

font-family: "lato", sans-serif;

text-shadow: none;

-webkit-border-radius: 2px;

border-radius: 2px;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

background: #77cb6d;

-webkit-transition: all ease 0.3s;

-moz-transition: all ease 0.3s;

-ms-transition: all ease 0.3s;

-o-transition: all ease 0.3s;

transition: all ease 0.3s;

}

.main-nav-inner .textwidget a.woo-sc-button {

color: white;

text-align: center;

font-size: 1em;

font-family: inherit;

cursor: pointer;

line-height: 1;

white-space: nowrap;

font-weight: bold;

font-family: "lato", sans-serif;

text-shadow: none;

}
.main-nav-inner .textwidget a.woo-sc-button {
margin-top: 10px;
border-radius:0px;
}


Creativira comments:

Giri: nice try but isp_charlie got the vote for the css.


Creativira comments:

Next:

1. hide the quote button when on the 'request-a-quote' page.
2. the quote button shows below the nav on mobile screen.

will add 10 more vote$.


Creativira comments:

Should I create a new question or add votes to this one?


Giri comments:

To hide button

.page-id-71 #navigation .woo-sc-button {
display:none;
}


Giri comments:

Yeah just add votes to this one..

@media(max-width:768px) {
#navigation .textwidget {
text-align:left;
}
}


Giri comments:

So the final code will be

.page-id-71 #navigation .woo-sc-button {
display:none;
}

@media(max-width:768px) {
#navigation .textwidget {
text-align:left;
}
}


Creativira comments:

Thanks Giri. You and Charlie both have votes on this one :)

You were first to get the hide button on page-id-71 and Charlie provided code that kept the nav visible and your code aligned button left.

2013-06-22

isp_charlie answers:

please show your link.


isp_charlie comments:

file brown.css line 181 add "#navigation .woo-sc-button" before like bellow:


#navigation .woo-sc-button,
#header .cart-contents:before,
a.button,
#commentform #submit,
.submit,
.added_to_cart,
input[type=submit],
input.button,
button.button,
.wrapper .woo-sc-button {
background: #ae7f3b;
}


file style.css line 2929 add "#navigation .woo-sc-button" before like bellow

a.button,
#commentform #submit,
.submit,
.added_to_cart,
input[type=submit],
input.button,
button.button,
.wrapper .woo-sc-button,
.slide-content .woo-sc-button,
#navigation .woo-sc-button {


also line 2987 add "#navigation .woo-sc-button:hover," before.


Creativira comments:

isp_charlie: I am using a child theme--custom.css


isp_charlie comments:

put this to custom.css


#navigation .woo-sc-button {
display: inline-block;
padding: .875em 1.416em;
color: white;
text-align: center;
text-decoration: none;
font-size: 1em;
/* Make inputs the same size as normal text */

font-family: inherit;
/* Make inputs use the correct typeface instead of the browser default */

cursor: pointer;
/* Inputs need pointers! */

overflow: visible;
width: auto;
/* IE fix */

line-height: 1;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box;
/* Firefox, other Gecko */

box-sizing: border-box;
/* Opera/IE 8+ */

white-space: nowrap;
font-weight: bold;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "lato", sans-serif;
text-shadow: none;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #77cb6d;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
background: #ae7f3b;
}

#navigation .woo-sc-button:hover {
background: #66ba5c;
color: #fff;
text-decoration: none !important;
}



Creativira comments:

Good work Charlie. You have the vote for this one.


Creativira comments:

p.s. to be clear, partial vote for css assistance.


isp_charlie comments:

try this :)
.page-id-71 #navigation .woo-sc-button {

display:none;

}
@media(max-width:768px) {

#navigation {
display: block!important;

}
#navigation .main-nav {
display: none;
text-align:left;

}

#navigation .right {
clear: both;
margin-top: 10px;
}

#navigation[style="display: block;"] .main-nav {
display: block!important;
}
#navigation[style="display: none;"] .main-nav {
display: none!important;
}

}


isp_charlie comments:

oh sorry, try this again


@media(max-width:768px) {

#navigation {
display: block!important;

}
#navigation #main-nav {
display: none;
text-align:left;

}

#navigation .right {
clear: both;
margin-top: 10px;
}

#navigation[style="display: block;"] #main-nav {
display: block!important;
}
#navigation[style="display: none;"] #main-nav {
display: none!important;
}

}


Creativira comments:

Thank you Charlie :) it's a split for you and Giri on this one.

One last request: how to style the Gravity Forms button to look like the one you helped with earlier.


Creativira comments:

That's what I was looking for!
Couple of things:

1. align button center
2. menu should open upon clicking :)


Creativira comments:

re: align button: center; done.

two things left:
1. nav open upon click/touch
2. Gravity Forms button to look like theme button


isp_charlie comments:

update media css again

@media(max-width:768px) {
#navigation {
display: block!important;
}

#navigation #main-nav {
display: none;
text-align:left;
}

#navigation .textwidget {
text-align: center;
}

#navigation .right {
clear: both;
margin-top: 10px;

}
}

//find header.php
<span class="nav-toggle"><a href="#navigation"><span> change to <span class="nav-toggle"><a href="#main-nav"><span>


Creativira comments:

Nav same behavior after updating to above on mobile. On desktop is visible again :)


isp_charlie comments:

now begins complex, can send me informations i'll fix for you ?


Creativira comments:

fyi button for the Gravity Form is not right only on the mobile screen.


Creativira comments:

admin, ftp or both?


isp_charlie comments:

only ftp, by email : [email protected]

2013-06-22

Arnav Joy answers:

can you show your site link?


Creativira comments:

http://cabinethaus.viracreativesolutions.com/preview$

2013-06-22

Hariprasad Vijayan answers:

Hello,

Just use following code for button.

echo do_shortcode('[shortcode]');


No need of custom widget area.