Spun Theme Centre Navigation Menu

  • Resolved talbot649

    (@talbot649)


    11 years, 2 months ago

    Hi there,

    I’ve managed to centre the navigation menu for use on desktop browsers, however it was a fair bit of trial and error and it looks awful on tablets and smartphones. I was hoping someone could take a look at the following CSS and advise where I’m going wrong?

    The site is https://andrewbrannanphotography.co.uk/ – if you reduce your browser window you’ll see the layout get thrown…

    /* =Menu
----------------------------------------------- */

.main-navigation {
	color: #999;
	float: left;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	-webkit-text-stroke: .15px; /* Hack to fix thin text in Windows */
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 5;
	margin: 130px 0 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 75%;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation li {
	float: right;
	text-align: center;
	margin: 0 0 5px 20px;
	position: relative;
}
Viewing 4 replies - 1 through 4 (of 4 total)

  • If you want to disable mobile toggle menu just add this to your functions.php:

    function spun_deactivate_menu() {
   wp_dequeue_script( 'spun-toggle' );
}
add_action( 'wp_print_scripts', 'spun_deactivate_menu' );

    Thread Starter talbot649

    (@talbot649)

    Many thanks – I’ve added that. I still have a problem in that when you reduce the size of the browser (as will automatically happen on smaller screens) the menu splits over 2 lines and is out of alignment. Can you help with that?

    Add this to your custom css:

    .main-navigation {
width: 100%;
}
.main-navigation li {
float: none;
text-align: center;
margin: 0 10px 5px 10px;
position: relative;
display: inline-block;
}

    Although the menu will still split over 2 lines because the #page div is too narrow to display everything in one line. You could eventually re-size #page, but you might end up with messed up design of all other elements.

    Add this custom css and you’ll see if it fits:

    @media screen and (max-width: 800px)
#page {
width: 100%;
}

    Thread Starter talbot649

    (@talbot649)

    My friend you are a genius – I can’t thank you enough. That works great now ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Spun Theme Centre Navigation Menu’ is closed to new replies.