[Resolved] 2 Questions: Headerboarder; Positioning

Home Forums Support [Resolved] 2 Questions: Headerboarder; Positioning

Home Forums Support 2 Questions: Headerboarder; Positioning

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

    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(); ?>>
    						if ( has_nav_menu( 'primary' ) ) :
    							wp_nav_menu( array( 
    								'theme_location' => 'primary',
    								'container_class' => 'main-nav',
    								'menu_class' => 'menu',
    								'items_wrap' => '%3$s'
    							) );
    						else :
    				</div><!-- .main-nav -->
    		</div><!-- .inside-navigation -->
    	</nav><!-- #site-navigation -->

    Thanks a lot for your help!

    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:


    All done using CSS – no need to edit files, and mobile responsive πŸ™‚

    Hope this helps,

    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!

    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 πŸ™‚


    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:


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


    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.


    Carsten Lorenz

    remember! πŸ˜€

    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

    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>

    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

    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 πŸ™‚

    Carsten Lorenz

    absolutely amazing! thank you very very much!

    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…

    Lead Developer
    Lead Developer

    Ha – actually this is a bug with the new version – not your shadows πŸ™‚

    Do this:

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


    Carsten Lorenz

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

    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.