WordPress.org

Ready to get started?Download WordPress

Forums

How to put top nav menu vertically outside of wrapper/container (16 posts)

  1. TMichaelLaw
    Member
    Posted 1 year ago #

    here is the code in the header.php file. My question is how I could get the topNav menu to appear vertically outside of the main container. See the left side of http://lareviewofbooks.org for an example of the type of vertical menu I want. Here is my header.php:

    <body <?php body_class($class); ?>>
    	<a></a>
    
    	<!-- BEGIN WRAPPER -->
    	<div id="wrapper">
    
    		<!-- BEGIN HEADER-TOP -->
    		<?php wp_nav_menu(array('theme_location' => 'topNav', 'depth' => 3, 'fallback_cb' => false, 'menu_class' => 'topNav')); ?>
    		<!-- END HEADER-TOP -->
    
    		<!-- BEGIN WRAPPER-CONTENT -->
    		<div id="wrapper-content">
    
    			<!-- BEGIN HEADER -->
    			<div id="header">
    
    				<!-- BEGIN HEADER-MIDDLE -->
    				<div id="header-middle">
    
    					<div id="logo">
    						<?php
    						if(get_option('pyre_logo')) {
    							$logo = get_option('pyre_logo');
    						} else {
    							if(get_option('pyre_skins')) {
    								$color = explode('_', get_option('pyre_skins'));
    								$logo = get_bloginfo('template_directory') . '/css/skins/images/' . $color[1] . '_logo.png';
    							} else {
    								$logo = get_bloginfo('template_directory') . '/images/logo4.png';
    							}
    						}
    						?>
    						<a>'><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" /></a>
    					</div>
    
    					<?php if(get_option('pyre_header_banner')): ?>
    					<div id="header-banner">
    						<?php echo get_option('pyre_header_banner'); ?>
    					</div>
    					<?php endif; ?>
    
    				</div>
    				<!-- END HEADER-MIDDLE -->
    
    				<!-- BEGIN WRAPPER-NAVIGATION -->
    				<div id="wrapper-navigation">
    
    					<div id="navigation">
    						<?php wp_nav_menu(array('theme_location' => 'mainNav', 'depth' => 3)); ?>
    					</div>
    
    				</div>
    				<!-- END WRAPPER-NAVIGATION -->
    
    			</div>
    			<!-- END HEADER -->

    [In future please wrap your code in backticks - http://codex.wordpress.org/Forum_Welcome#Posting_Code - the above code is likely to be corrupted by the forum parser]

  2. TMichaelLaw
    Member
    Posted 1 year ago #

    The relevant part is:

    <!-- BEGIN HEADER-TOP -->
    <?php wp_nav_menu(array('theme_location' => 'topNav', 'depth' => 3, 'fallback_cb' => false, 'menu_class' => 'topNav')); ?>
    <!-- END HEADER-TOP -->

    [In future please wrap your code in backticks]

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you installed WordPress on your website?

  4. TMichaelLaw
    Member
    Posted 1 year ago #

    Of course

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    On which page?

  6. TMichaelLaw
    Member
    Posted 1 year ago #

    We're at http://themarginaliareview.com, but we are behind a Coming Soon page for now.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Change this;

    <!-- BEGIN WRAPPER -->
    	<div id="wrapper">
    
    		<!-- BEGIN HEADER-TOP -->
    		<?php wp_nav_menu(array('theme_location' => 'topNav', 'depth' => 3, 'fallback_cb' => false, 'menu_class' => 'topNav')); ?>
    		<!-- END HEADER-TOP -->
    
    		<!-- BEGIN WRAPPER-CONTENT -->
    		<div id="wrapper-content">

    To this;

    <?php wp_nav_menu(array('theme_location' => 'topNav', 'depth' => 3, 'fallback_cb' => false, 'menu_class' => 'topNav')); ?>
    	<!-- BEGIN WRAPPER -->
    	<div id="wrapper">
    
    		<!-- BEGIN HEADER-TOP -->
    		<!-- END HEADER-TOP -->
    
    		<!-- BEGIN WRAPPER-CONTENT -->
    		<div id="wrapper-content">
  8. TMichaelLaw
    Member
    Posted 1 year ago #

    How would I then arrange the menu vertically and choose either left or right side of the page?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    It sounds as though you need the support of a CSS forum like http://csscreator.com/forum

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @TMichaelLaw - The site you linked to has a sidebar on the left side of the page which contains the navigation menu. If your theme does not have a sidebar option, you can add it and create custom page templates. What theme are you using?

    These may be a starting point:

    http://codex.wordpress.org/Function_Reference/register_sidebar

    http://codex.wordpress.org/Customizing_Your_Sidebar

    http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

  11. TMichaelLaw
    Member
    Posted 1 year ago #

    Avenue is our theme. This might be getting us somewhere WPyogi! But where to go from here? Here is the sidebar.php:

    <!-- BEGIN SIDEBAR -->
    <div id="sidebar">

    <?php
    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')):
    endif;
    ?>

    </div>
    <!-- END SIDEBAR -->

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can seek support from your theme's vendors, we don't want to deprive commercial theme vendors of support services they provide and therefore don't support commercial themes.

  13. TMichaelLaw
    Member
    Posted 1 year ago #

    Thank you Andrew, and ordinarily I'd understand. But they do not offer any advice regarding modifying the php files.

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You would likely need to create an additional custom sidebar file - and then call that for the menu sidebar -- and add CSS styles so it fits correctly on the page. There are quite a few previous threads that address how to do it -- though it won't be specific to your theme.

    Unfortunately, these forums cannot support commercial themes, so you'll need to go to the developer for theme-specific help.

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You could also consider hiring someone to help with something like this or find a theme that is supported here -- all of these fall into that category:

    http://wordpress.org/extend/themes/

  16. TMichaelLaw
    Member
    Posted 1 year ago #

    Thank you both

Topic Closed

This topic has been closed to new replies.

About this Topic