- This topic has 12 replies, 2 voices, and was last updated 9 years, 1 month ago by
Tom.
-
AuthorPosts
-
July 25, 2014 at 8:21 am #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!
July 25, 2014 at 9:47 am #6448Tom
Lead DeveloperLead DeveloperHi 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,
TomJuly 28, 2014 at 4:57 am #7113Carsten 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!
July 28, 2014 at 9:19 am #7136Tom
Lead DeveloperLead DeveloperHmm 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
August 3, 2014 at 1:11 pm #8859Tom
Lead DeveloperLead DeveloperThe 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,
TomAugust 3, 2014 at 4:11 pm #8882Carsten Lorenz
remember! π
August 4, 2014 at 3:42 am #9015Carsten 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” ></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” ></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 shadowsAny idea what I might have done wrong?
Thanks again
August 4, 2014 at 8:18 am #9058Tom
Lead DeveloperLead DeveloperMy bad – you need one more little CSS tweak:
.inside-navigation {position:relative;}
Let me know if that works or not π
TomAugust 4, 2014 at 2:18 pm #9281Carsten Lorenz
absolutely amazing! thank you very very much!
August 4, 2014 at 2:22 pm #9282Carsten 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…August 4, 2014 at 3:36 pm #9300Tom
Lead DeveloperLead DeveloperHa – actually this is a bug with the new version – not your shadows π
Do this:
.site-logo {max-width:100%;}
Tom
August 5, 2014 at 10:21 am #9500Carsten Lorenz
Hmmmm… nothing changed… I put it into the custom CSS tool, just for you to know!
August 5, 2014 at 3:33 pm #9510Tom
Lead DeveloperLead DeveloperThe site is responsive for me – nothing out of the normal happening as I resize down to mobile size.
-
AuthorPosts
- You must be logged in to reply to this topic.