Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] 2 Questions: Headerboarder; Positioning

Home Forums Support 2 Questions: Headerboarder; Positioning

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #6414
    Carsten Lorenz

    Hey!
    First of all thank you very much for the template I really like it and its very well!

    Just for you to know its my first time with wordpress and I own all you addons.

    Like the title says I do have two questions:

    1. When the screen gets scaled down do lets say smartphone-size the header that has normally no boarders get a white boarder all around is there any way to get rid of that boarder?

    2. like you can see in on the homepage http://www.zahnarzt-lorenz.de/wordpress I added some shadows in the menubar… these are *pngs an they fit properly when the window is large but when you scale down the screen slowly they start moving downwards, just by 1 or later 2 pixels, but it looks awful. is there any way to make them stay in place? 😀

    Here is the code I embedded in the navigation.php

    <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" id="site-navigation" role="navigation" <?php generate_navigation_class(); ?>>
    
          	<div style="position:absolute; z-index:2; left: 50%;margin-left: -520px; margin-top:-12px;"><img src="http://www.zahnarzt-lorenz.de/dropshadow2.png" ></div>
    	<div style="position:absolute; z-index:2; left: 50%;margin-left: -520px; margin-top: 39px;"><img src="http://www.zahnarzt-lorenz.de/dropshadow2.png" ></div>
    		
    		<div class="inside-navigation grid-container grid-parent">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'generate' ); ?></h3>
    			<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'generate' ); ?>"><?php _e( 'Skip to content', 'generate' ); ?></a></div>
    				<div class="main-nav">
    					<ul <?php generate_menu_class(); ?>>
    						<?php 
    						if ( has_nav_menu( 'primary' ) ) :
    							wp_nav_menu( array( 
    								'theme_location' => 'primary',
    								'container_class' => 'main-nav',
    								'menu_class' => 'menu',
    								'items_wrap' => '%3$s'
    							) );
    						else :
    							wp_list_pages('sort_column=menu_order&title_li=');
    						endif;
    						?>
    					</ul>
    				</div><!-- .main-nav -->
    		</div><!-- .inside-navigation -->
    	</nav><!-- #site-navigation -->

    Thanks a lot for your help!

    #6448
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. This CSS should do the trick:

    @media screen and (max-width: 767px) {
          div.inside-header {padding: 0 !important;}
    }

    You should use a child theme or a custom css plugin like this: https://wordpress.org/plugins/simple-css/

    2. First, you shouldn’t edit core theme files like that unless you’re using a child theme, because you’ll lose your edits if you choose to update the theme to a newer version – you can ready more about child themes here: http://codex.wordpress.org/Child_Themes

    I would go about it this way:

    https://gist.github.com/generatepress/7fa78290485a2b0ca2a5

    All done using CSS – no need to edit files, and mobile responsive 🙂

    Hope this helps,
    Tom

    #7113
    Carsten Lorenz

    Thank you for your fast help and also for the tipps with the child theme and plugin!! It worked nearly perfect. There is only one thing I’d like to ask you again.
    Is there a way to get the shadow above the colored menu? Right now the selected menu doesn’t have a shadow, cause its used as a background.

    Thanks again! Great work!

    #7136
    Tom
    Lead Developer
    Lead Developer

    Hmm good point!

    I’ll have to include a new hook in the upcoming version so you can hook the images into the inside-navigation element. This way you won’t have to edit core files or play with any margining – will just need to absolute position then up and down.

    Remind me once you install the new version and I’ll provide you with the code to do it 🙂

    Tom

    #8859
    Tom
    Lead Developer
    Lead Developer

    The newest version of GeneratePress has a hook inside the navigation, so you should be able to add something like this to your child theme’s functions.php file:

    https://gist.github.com/generatepress/281280fdfa57f905ce3b

    If you don’t have/know how to create a child theme, you can use this:

    http://generatepress.com/api/themes/generatepress_child.zip

    Simply install that like any other theme and activate (you may have to re-set your menus).

    Then go to “Appearance > Editor > functions.php” and you can add the code provided.

    Thanks,
    Tom

    #8882
    Carsten Lorenz

    remember! 😀

    #9015
    Carsten Lorenz

    Sorry I did not refresh the page before posting…

    First to say I really appreciate your afford to help me! Thank you very much.
    But still I don’t get it to work.
    Child theme is installed and running, functions php looks like this

    `<?php
    add_action(‘generate_inside_navigation’,’generate_add_nav_shadows’);
    function generate_add_nav_shadows() {
    ?>
    <div style=”left: 0; margin-top: -12px;max-width: 100%;position: absolute;text-align: center;top: 0;z-index: 2;”><img src=”http://www.zahnarzt-lorenz.de/dropshadow2.png&#8221; ></div>

    <div style=” bottom: -10px;left: 0;max-width: 100%;position: absolute;text-align: center;z-index: 2;”><img src=”http://www.zahnarzt-lorenz.de/dropshadow2.png&#8221; ></div>
    <?php
    }`

    and like you said the menu changed but now there are no shadows…
    I tested both, with the additional CSS code and without
    with the code I have shadows but as background
    without the code I don’t get any shadows

    Any idea what I might have done wrong?

    Thanks again

    #9058
    Tom
    Lead Developer
    Lead Developer

    My bad – you need one more little CSS tweak:

    .inside-navigation {position:relative;}

    Let me know if that works or not 🙂
    Tom

    #9281
    Carsten Lorenz

    absolutely amazing! thank you very very much!

    #9282
    Carsten Lorenz

    arrrrr … i was to fast :/ …
    now i’m back with the movement problem… its implemented right now so you can see it (http://zahnarzt-lorenz.de/wordpress/) …
    when the screen gets smaller they shadow moves…

    #9300
    Tom
    Lead Developer
    Lead Developer

    Ha – actually this is a bug with the new version – not your shadows 🙂

    Do this:

    .site-logo {max-width:100%;}

    Tom

    #9500
    Carsten Lorenz

    Hmmmm… nothing changed… I put it into the custom CSS tool, just for you to know!

    #9510
    Tom
    Lead Developer
    Lead Developer

    The site is responsive for me – nothing out of the normal happening as I resize down to mobile size.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.