Hallo zusammen,
nachdem die Suchfunktion hier im Forum als auch Google mir nicht ganz weitergeholfen habe, wende ich mich nun hoffnungsvoll an euch :)
Bei meinem Theme florence klebt das Menü ganz oben fest, ich würde es gerne unter den Header-Bereich bringen. Am Anfang habe ich in der .css Datei die line-height entsprechend angepasst; Problem ist dann aber, dass das Dropdown-Menü sich ebenfalls nach unten anpasst. Außerdem scrollt das Menü mit, definitiv nicht gewünscht.
Dann habe ich eben hier im Forum einen ähnlichen Beitrag gefunden, da wurde geraten in der header.php einen gewissen Teil vor </header> zu stellen. Das Menü ist tatsächlich "nach unten gekommen", klebte dann aber links am Rand fest. In der .css Datei habe ich es dann versucht zentriert zu setzen, nicht geklappt. Habe es letztendlich glaube ich mit einem padding hinbekommen, das Menü war auf meinem iPad dann aber untereinander, auf dem iPhone gar nicht mehr zu sehen. Ihr merkt, ich habe leider nicht viel Ahnung. Schön, wenn ich den ein oder anderen mit meinen "Ideen" also vll sogar zum lachen bringen konnte ;-)
Ich füge euch mal einen Teil der .css Datei bei:
Code
/*** /* Menu /********************/ .menu { float:left; }
.menu li { display:inline-block; margin-right:26px; position:relative; } .menu li a { font-size:13px; text-transform:uppercase; letter-spacing:1px; line-height:50px; color:#777; display:block; font-family:"open sans"; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; } .menu li.current-menu-item a, .menu li.current_page_item a, .menu li a:hover { color:#EF9D87; } /*** DROPDOWN ***/ .menu .sub-menu, .menu .children { background-color: #fff; display: none; padding: 0; position: absolute; margin-top:0; left: 0; z-index: 99999; -webkit-box-shadow: 0 5px 4px -4px rgba(190,190,190,.1); -moz-box-shadow: 0 5px 4px -4px rgba(190,190,190,.1); box-shadow: 0 5px 4px -4px rgba(190,190,190,.1); } ul.menu ul a, .menu ul ul a { color: #999; margin: 0; padding:6px 10px; min-width: 160px; line-height:20px; -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s; transition:.25s; border-top:1px solid #f4f4f4; } ul.menu ul li, .menu ul ul li { padding-right:0; margin-right:0; }
ul.menu ul a:hover, .menu ul ul a:hover { color: #fff; background:#EF9D87; }
ul.menu li:hover > ul, .menu ul li:hover > ul { display: block; } .menu .sub-menu ul, .menu .children ul { left: 100%; top: 0; }und ich füge euch auch die Datei von der header.php mit ein:
PHP
<!DOCTYPE html><html <?php language_attributes(); ?>><head>
<meta charset="<?php bloginfo( 'charset' ); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '-', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" /> <?php if(get_theme_mod('sp_favicon')) : ?> <link rel="shortcut icon" href="<?php echo get_theme_mod('sp_favicon'); ?>" /> <?php endif; ?> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> </head>
<body <?php body_class(); ?>> <div id="top-bar"> <div class="container"> <div id="navigation-wrapper"> <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'main-menu', 'menu_class' => 'menu' ) ); ?> </div> <div class="menu-mobile"></div> <?php if(!get_theme_mod('sp_topbar_social_check')) : ?> <div id="top-social"> <?php if(get_theme_mod('sp_facebook')) : ?><a href="http://facebook.com/<?php echo get_theme_mod('sp_facebook'); ?>" target="_blank"><i class="fa fa-facebook"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_twitter')) : ?><a href="http://twitter.com/<?php echo get_theme_mod('sp_twitter'); ?>" target="_blank"><i class="fa fa-twitter"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_instagram')) : ?><a href="http://instagram.com/<?php echo get_theme_mod('sp_instagram'); ?>" target="_blank"><i class="fa fa-instagram"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_pinterest')) : ?><a href="http://pinterest.com/<?php echo get_theme_mod('sp_pinterest'); ?>" target="_blank"><i class="fa fa-pinterest"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_bloglovin')) : ?><a href="http://bloglovin.com/<?php echo get_theme_mod('sp_bloglovin'); ?>" target="_blank"><i class="fa fa-heart"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_google')) : ?><a href="http://plus.google.com/<?php echo get_theme_mod('sp_google'); ?>" target="_blank"><i class="fa fa-google-plus"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_tumblr')) : ?><a href="http://<?php echo get_theme_mod('sp_tumblr'); ?>.tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_youtube')) : ?><a href="http://youtube.com/<?php echo get_theme_mod('sp_youtube'); ?>" target="_blank"><i class="fa fa-youtube-play"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_dribbble')) : ?><a href="http://dribbble.com/<?php echo get_theme_mod('sp_dribbble'); ?>" target="_blank"><i class="fa fa-dribbble"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_soundcloud')) : ?><a href="http://soundcloud.com/<?php echo get_theme_mod('sp_soundcloud'); ?>" target="_blank"><i class="fa fa-soundcloud"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_vimeo')) : ?><a href="http://vimeo.com/<?php echo get_theme_mod('sp_vimeo'); ?>" target="_blank"><i class="fa fa-vimeo-square"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_linkedin')) : ?><a href="<?php echo get_theme_mod('sp_linkedin'); ?>" target="_blank"><i class="fa fa-linkedin"></i></a><?php endif; ?> <?php if(get_theme_mod('sp_rss')) : ?><a href="<?php echo get_theme_mod('sp_rss'); ?>" target="_blank"><i class="fa fa-rss"></i></a><?php endif; ?> </div> <?php endif; ?> <?php if(!get_theme_mod('sp_topbar_search_check')) : ?> <div id="top-search"> <a href="#"><i class="fa fa-search"></i></a> </div> <div class="show-search"> <?php get_search_form(); ?> </div> <?php endif; ?> </div> </div> <header id="header"> <div class="container"> <div id="logo"> <?php if(!get_theme_mod('sp_logo')) : ?> <?php if(is_front_page()) : ?> <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h1> <?php else : ?> <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h2> <?php endif; ?> <?php else : ?> <?php if(is_front_page()) : ?> <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1> <?php else : ?> <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h2> <?php endif; ?> <?php endif; ?> </div> </div> </header>Ich freu mich auf eure Ideen und danke euch schonmal im Voraus für eure Mühe.
Liebe Grüße
Saskia