Archived topic
Slide Menu
10 replies · Started by Mitchell on September 28, 2016
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
Screenshot didn't work. :( You can view it here though:
https://www.dropbox.com/s/tl7pi8pwdumsfw2/Screenshot%202016-09-29%2011.03.02.png
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 :)
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
I just adjusted the first code - can you give it another shot?
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.
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 */
}
}
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
Any chance you can link me to your site?
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
You can use the contact page: https://generatepress.com/contact/