Spun Theme Centre Navigation Menu

Resolved

(@talbot649)

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 http://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)

Miha Omejc
(@mihaomejc)

10 years, 3 months ago
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)

10 years, 3 months ago

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?
Miha Omejc
(@mihaomejc)

10 years, 3 months ago
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)

10 years, 3 months ago

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.