Horizontal Menu in Singl Theme

  • Unknown's avatar
    sammusmusic · Member ·

    Hello, I recently changed my blog to the Singl theme, which is absolutely perfect except that the menu is drop down and it is vertical. I want to customize the menu to have a horizontal design right underneath the site title but when I sent my inquiry to Elto , which was linked from WordPress, I was told that they are unable to customize the layout . Now I’m profoundly confused because I’m not sure what the point of purchasing CSS was. Can someone please help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I think Elto was referring to changing the theme PHP script files, which cannot be done at WordPress.com.

    Changing the menu to horizontal and putting it below the site title can be done with CSS, but on responsive width themes, such as Singl, this is complex. The following moves the menu down below the site title for browser window/screen widths greater than 640px, which is where things get very complex.

    @media screen and (min-width: 640px) {
    .main-navigation ul {
    display: inline-flex;
    top: 175px;
}
.site-branding {
    margin-bottom: 65px;
}
}

    Give that a try and see what you think. I notice that in your custom CSS, you have put your custom CSS between comment designators (/* and */). I don’t know if you did that intentionally or not. Anything between those designators will be ignored by the browsers, so if you want that CSS applied, you need to remove those.

  • Unknown's avatar
    sammusmusic · Member ·

    Wow thank you so much! That worked perfectly. Cheers!

  • Unknown's avatar
    gemmatball · Member ·

    Hi I am currently trying to do this as well.

    @thesacredpath advice was very helpful, and my blog currently looks like this:
    https://gymnesia.wordpress.com

    However I’d ideally like to centre the menu below my header and make the background transparent – is this possible?

  • Unknown's avatar
    designsimply · Member ·

    Building on @thesacredpath’s previous example, give this a try:

    @media screen and (min-width: 780px) {
	.menu-toggle {
		display: none;
	}
	.main-navigation {
		top: 230px;
	}
	.main-navigation.toggled .nav-menu {
		padding: 0;
		margin: auto;
		width: 168px;
	}
	.main-menu > ul > li {
		float: left;
	}
	.main-navigation a:hover {
		background-color: inherit;
		color: #a0dbf3;
	}
	.main-menu > ul:first-of-type {
		border: none;
	}
}

    It was a bit tricky to work out, so you should try it out and make sure to test it.

  • Unknown's avatar
    designsimply · Member ·

    @gemmatball, do you still need help with the menu on https://gymnesia.wordpress.com/ ?

  • Unknown's avatar
    designsimply · Member ·

    @gemmatball, I checked back on http://gymnesia.com/ and I noticed you still haven’t moved the menu. If you want to do that, the CSS snippet posted earlier in this thread should work!

  • Unknown's avatar
    lyshastra · Member ·

    How do I change the color of the odd menu highlighting? That green is nice, but not what I need. I want to apply #A00000

    Also, what portion of the Editor should I be in? I’ve gone through them all and at this point I’m going cross-eyed trying to find what I need.

  • Unknown's avatar
    thesacredpath · Member ·

    @ lyshastra, there is one WordPress.com site linked to your username using the Spectrum theme, and http://snowzillaarts.com, which is a self-hosted WordPress site using the software from WordPress.com. If you are talking about a WordPress.com site, can we please have the URL of that site?

    If you are talking about the self-hosted site at http://snowzillaarts.com, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.

    For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

    The differences between WordPress.com and WordPress.org.

  • The topic ‘Horizontal Menu in Singl Theme’ is closed to new replies.