Jump to content

Customising a responsive website header...Help needed

Recommended Posts

I am currently building a wordpress site for a friend and have downloaded a responsive theme that he likes and that seems easy (for the most part) to work with. However, I need to make a fairly big change and have little idea of how to do it (I know the basic html and css, but not much more). The website in question is dev.rjthompsonmusic.com If you look at that site, you'll see that there is a search box in the header next to the social icons. The search box is responsive and jumps to the very top of the page when you view it on a mobile / shrink the screen down. I want to replace this search bar with a Mailchimp email subscribe box, **whilst retaining the minimalist look and responsive design of it**. How would I go about doing this correctly? Basically I just want to change the search box into a field where you can enter your email address and and press enter to subscribe... exactly the same as it currently looks, but with the different functionality. Here's the header.php file (I don't know if this controls the mobile layout as well though):

    <!DOCTYPE html>     <!--[if lt IE 7 ]> <html class="no-js ie ie6" <?php language_attributes(); ?>> <![endif]-->    <!--[if IE 7 ]> <html class="no-js ie ie7" <?php language_attributes(); ?>> <![endif]-->    <!--[if IE 8 ]> <html class="no-js ie ie8" <?php language_attributes(); ?>> <![endif]-->    <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->        <head>     <meta charset="<?php bloginfo('charset'); ?>">     <meta name="viewport" content="width=device-width, initial-scale=1.0">         <title><?php wp_title(''); ?></title>         <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">         <script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic|Fjalla+One' rel='stylesheet' type='text/css'>          <!--[if lt IE 9]>     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>     <script src="<?php echo get_template_directory_uri(); ?>/js/ie/selectivizr.js"></script>     <![endif]-->          <?php wp_head(); ?>    </head>        <body <?php body_class(); ?>>         <?php echo wpb_page_background_image(); ?>        <div class="body-wrapper">          <header id="header">         <?php if ( wpb_option('header-widget-ads') ): ?>     <div class="ads-header group">     <div class="container">     <div class="grid one-full">     <ul><?php dynamic_sidebar('widget-ads-header'); ?></ul>     </div>     </div>     </div><!--/.ads-header-->     <?php endif; ?>          <?php if ( has_nav_menu( 'header' ) ): ?>     <nav class="nav-container group" id="nav-header">     <div class="nav-toggle" id="nav-header-toggle"><i class="icon-reorder"></i></div>     <div class="nav-wrap">     <?php wp_nav_menu( array('theme_location'=>'header','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?>     </div>     </nav><!--/#nav-header-->     <?php endif; ?>          <div class="container">     <div class="pad group">      <?php echo wpb_site_name(); ?>     <?php echo wpb_site_desc(); ?>           <?php if ( !wpb_option('disable-header-search') ): ?>     <div id="header-search" class="group"><?php get_search_form(); ?></div>     <?php endif; ?>          <?php if ( !wpb_option('disable-header-social') ): ?>      <?php echo wpb_social_media_links(array('id'=>'header-social','class'=>'social-module')); ?>     <?php endif; ?>      </div>          <?php if ( is_home() || is_single() || is_archive() ) get_template_part('partials/newsflash'); ?>          <?php if ( has_nav_menu( 'subheader' ) ): ?>     <nav class="nav-container group" id="nav-subheader">     <div class="nav-toggle" id="nav-subheader-toggle"><i class="icon-reorder"></i></div>     <div class="nav-wrap">     <?php wp_nav_menu( array('theme_location'=>'subheader','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?>     </div>     </nav><!--/#nav-subheader-->     <?php endif; ?>          </div><!--/.container-->          </header><!--/#header-->         <div id="page">     <div class="container">     <div class="container-inner">

....and here is the Mailchimp generated form code (including labels, which I don't want... I just want the functionality of the form whilst keeping the look of the search box):

    <!-- Begin MailChimp Signup Form -->    <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">    <style type="text/css">     #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }     /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.        We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */    </style>    <div id="mc_embed_signup">    <form action="http://rjthompsonmusic.us4.list-manage.com/subscribe/post?u=86729b354d1a75a35e8fd9771&id=bd9f282fc3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>     <label for="mce-EMAIL">Subscribe to our mailing list</label>     <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>     <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>    </form>    </div>        <!--End mc_embed_signup-->

Remember, I literally just want the email field with some text asking people to enter their email address and press enter. Any help would be amazing. Thanks so much in advance. HT

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...