0

I'm a novice at WordPress topic and now I'm trying to figure out how to migrate the part of the design (I've decided to begin with navigation bar menu on the top) on this site to my own site based on WordPress: http://roomble.com

The menu snippet I've tried to recover on here but without the headroom effect: http://fiddle.jshell.net/zhfapnfg/

Navbar menu uses headroom.js and I'd like to transfer the same behavior on scrolling to my site. Is it possible to migrate all design without any losses? If possible then how? And what structure it would take?

Up to this moment I've created a minimalistic backbone without layout but with header on my site:

<?php
/*
 * header.php
 *
 * The header for the theme.
*/

$favicon = IMAGES . '/icons/favicon.png';
$touch_icon = IMAGES . '/icons/apple-touch-icon-152x152-precomposed.png';
?>

<!DOCTYPE html>
<!-- [if IE 8]> <html <?php language_attributes(); ?> class="ie8"> <![endif]-->
<!-- [if !IE] <!--><html lang="en"> <!--<![endif]-->

<head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <title><?php wp_title('|', true, 'right')?><?php bloginfo('name'); ?></title>
        <meta name="description" content="<?php bloginfo('description'); ?>">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="css/style.css">

        <!-- [if lt IE 9]>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <link rel="shortcut icon" href="<?php echo $favicon; ?>">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="<?php echo $touch_icon; ?>">
        <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
        <!-- HEADER -->
        <header class="site-header" role="banner">
                <div class="container header-contents">
                        <div class="col-xs-3">
                                <div class="site-logo">
                                        <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"></a>
                                </div>
                        </div>
<div class="col-xs-9">
                                <nav class="site-navigation" role="navigation">
                                                <?php
                                                        wp_nav_menu(
                                                                array(
                                                                        'theme-location' => 'main-menu',
                                                                        'menu-class' => 'site-menu'
                                                                )
                                                        );
                                                ?>
                                        </nav>

                                </div>
                        </div>
        </header>

        <!-- MAIN CONTENT AREA -->
        <div class="container">
                <div class="row">

                </div>
        </div>
| improve this question | |
0

Yes, it is typically possible to re–create arbitrary markup in WordPress. However the difficulty of the task varies from easy to highly challenging. Sometimes it is easier to bend to markup WordPress gives you, than bend markup to precise state.

For navigation menus there are basically two levels of control over markup:

  1. As per wp_nav_menu() documentation it accepts number of markup–related arguments. Since menu itself is typically just a HTML list, this can be quite sufficient to customize what that list is wrapped in.
  2. The walker argument accepts an object instance to override native Walker_Nav_Menu with. Walker object contains the code that actually iterates over data structures (menu's in this case) and processes arguments to put things together into HTML output. Customizing it gives full control over process, but the customizing itself is... acquired taste. :) Plenty folks (more so new to WP) don't like to deal with walkers.
| improve this answer | |
  • So, I need to integrate this menu to my site on WordPress including HeadRoom.js animation: fiddle.jshell.net/zhfapnfg The problem is that I don't know how to apply it because as you can see it attracts enormous amount of lines of code in stylesheet templates. – Павел Иванов Nov 23 '14 at 8:30
  • How is CSS a challenge? You just move stylesheets over or add it to theme's style. – Rarst Nov 23 '14 at 8:51
  • It could be challenged because wordpress, as I understood, forms the menu by generation it from the information what you fill in wp-admin (in menu or pages subsection, and menu/pages are associated to each other, for example, when you create the page, the appropriate section in menu with the link on this page will be created immediately). It might be problematic to overwrite fully-generated menu by default. Am I right? – Павел Иванов Nov 23 '14 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.