Customize menu on Twenty seventeen theme

It looks as if you have fixed the problem with the arrow to go to the bottom of the page.

To keep the menu on one line, you need to use a smaller font, shorter menu items, or change the padding/margins for each item. You have to make a choice as to what you want it to look like.

Keep the menu simple though. It might be better to have submenus on the pages where you land from the main menu.

I also have some questions about the twenty seventeen menus within the header. By default it appears that the menu follows whatever image you have chosen for the theme. I have created a child theme so I can play with the theme without getting my changes overwritten, but what I would like to experiment with is moving the menu to the top of the image and also perhaps making the menu text smaller. I assume some of that is done by altering the style.css file in the child theme folder, but I am not so sure about how one moves the postion of the navigation bar.

My test site:
https://saintmarkadmin.ipage.com/wordpress/

• This reply was modified 5 years, 2 months ago by Henry Stock.

@henrythe-stocksorg copy over header.php into your child theme if you haven’t already

Look for the following section of code in header.php

<?php if ( has_nav_menu( 'top' ) ) : ?>
			<div class="navigation-top">
				<div class="wrap">
					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
				</div><!-- .wrap -->
			</div><!-- .navigation-top -->
		<?php endif; ?>

Move it above the following line of code

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

Then in the Appearance->Customize->Additional CSS area you can use the following

.navigation-top {
	position: relative;
	font-size: 10px;
}

Is there a way to make the menu items font larger?

@chelseaedson0056 it is typically better to start your own topic for support, however you should be able to control the menu font using the following in Appearance->Customize->Additional CSS

.main-navigation li {
	font-size: 15px;
}