[Support request] Slide Menu

[Mitchell]

Hey Tom,

I want to slide some of the menu items over so that they line up with the content.

I want all the menu items, starting at Home, to start at the centre column. Is there a way?

Also the search icon on the far right needs to have “fa-lg” in it’s class, how can I make that happen.

Cheers
Mitchell

[Mitchell]

Screenshot didn’t work. 🙁 You can view it here though:

https://www.dropbox.com/s/tl7pi8pwdumsfw2/Screenshot%202016-09-29%2011.03.02.png

[Tom]

Hmm, you could try something like this…

@media (min-width: 769px) {
    .main-navigation .inside-navigation {
        padding-left: 25%; /* width of your sidebar */
    }
}

Not overly easy, but you can adjust the size of the icon quite easily:

.main-navigation .main-nav li.search-item a {
    font-size: 120%;
}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitchell]

Hey,

So the menu slide code didn’t worked. It turned my container menu into a full width menu. And slid the entire menu across (it didn’t even line up), it should have left the first two menu items at the front and just moved anything after them across.

BUT the second one did make the icon larger 🙂

Thanks

[Tom]

I just adjusted the first code – can you give it another shot?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitchell]

Almost there 🙂

https://www.dropbox.com/s/3nzf1cbtjjtuawf/Screenshot%202016-09-29%2015.39.24.png?dl=0

Now the Inbox and Calendar Icons need to go back to where they started on the far left. That way the Home button lines up with the Centre column like the inbox icon currently is.

[Tom]

Ah, that makes it a little harder.

So you would want to add a custom class to your home menu item:

Then apply the CSS to that menu item: https://generatepress.com/knowledgebase/using-menus/#custom-classes

@media (min-width: 769px) {
    .main-navigation li.your-custom-class {
        position: relative;
        left: 25%; /* width of your sidebar */
        margin-left: -20px; /* offset the icons on the far left */
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitchell]

Hey Tom,

Thanks for that, that half fixed it. See pic below. the top menu bar in the image is what it did. The second menu bar in the image is what I want it to look like.

https://www.dropbox.com/s/63cktkgzz642a6d/Untitled-1.fw.png?dl=0

Currently the code I have is:

@media (min-width: 769px) {
    .main-navigation .inside-navigation {
        padding-left: 25%; /* width of your sidebar */
		margin-left: 10px;
    }
}

Thanks again for your help.

Mitchell

[Tom]

Any chance you can link me to your site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitchell]

Sure can, do you have an email I can send it to? It’s a secure site so you can’t actually see it without credentials.

Cheers
Mitchell

[Tom]

You can use the contact page: https://generatepress.com/contact/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts