- Posts
Hi,
I have almost finished my site and then will replace my current homemade HTML site with the BoldGrid version. However, there is one annoying issue. I have a navigation menu at the top. On phones, it displays as a 3-bar icon which has a drop-down menu (which is what I like). BUT on the PC, the icon disappears and the pages are displayed as links all run together — not even in a list.
I want to configure the code to force the icon drop-down to appear on all screen sizes. This seems not too difficult but I am afraid to mess up the code.
Does anyone know how to do this?
Thanks in advance,
RHi R,
Thanks for reaching out and thanks for using Crio Pro WordPress theme!
We had a similar request in the past and we were able to help them create that functionality by using some Custom CSS in Crio. There’s a good chance that the code will have a similar effect on your site. Here is the CSS that turned their menu into a Hamburger on desktop:
@media only screen and (min-width: 768px) { .standard-menu-enabled input:not(:checked):not(.hidden)~.sm-clean { display: none; } .standard-menu-enabled label[id$=-menu-btn] { position: relative; top: unset; } #main-wrap { display: flex; } }Just navigate to Appearance<<Customize<<CSS/JS Editor and add the bit of code above in the CSS section.
Hopefully that CSS gives you the design you are looking for and please let us know if there is anything else that we can do to help!
Hi Brandon,
Thanks very much for the code. I put it in at the bottom of the Main Menu section, but nothing happened, so I took it out. I am actually using the Swifty theme of BoldGrid. Maybe it will help if I put the whole code for that section in here so you can see what it is…..? (See below)
I don’t see here where it inserts the menu icon for the phone size, but I suppose something here is referring to that in another place? The “navbar-default” seems to be what I’m getting on my PC and it looks terrible, as you see in the google link below. The pages are not even in a list — they just all run together. You can view it here:
https://drive.google.com/file/d/1nXIxUt9mlEyPKESDUMaZ_p_2fTqmCheY/view?usp=sharingSuggestions welcome!!!
Thank you!/*———————————————–
## Main Menu
———————————————–*/
.navbar {
border: none;
}
.navbar-default {
background: none;
margin: 15px 0 0;
}
.navbar-default .navbar-nav > li > a {
padding: 10px;
}
.navbar-default .navbar-nav > li:first-child > a {
margin-left: 0;
}/* Small devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.navbar-default .navbar-nav {
display: inline-block;
float: none;
}
.navbar-default .navbar-collapse {
text-align: center;
}
}/* Medium devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.navbar-default {
float: right;
}
.navbar-default .navbar-nav {
margin-left: -15px;
}
}My apologies I did not realize you were using Swifty, which is one of our legacy themes. That code may not work the same for Swifty. You could probably use a plugin like Responsive Menu to display the hamburger option on larger screens.
With our latest theme Crio you would have the ability to add that code and get the desired effect you want. The great thing about Crio is it’s fully compatible with the BoldGrid Post and Page Builder so it will integrate with your content seamlessly.
If you decide to install and activate Crio, you can apply that bit of CSS from your dashboard by navigating to Appearance<<Customize<<CSS/JS Editor and add that bit to the CSS section there.
Hi Brandon,
Well, the Crio theme looks interesting, but I’ve just spent the past couple of years (off and on) setting up my site in Swifty and am 99.9% done now, so I’m not interested in switching at present. I will keep Crio in mind for the future, if I want to update the site. Have played around with the Swifty menu and it’s acceptable at this point, even though not exactly what I want, so I’m leaving it at that. I figured out how to indent the menu pages to make a drop-down on desktop and that’s okay.
Hopefully, later today I will launch it. Tricky, because I already have a live site (not BoldGrid) that I want to replace with my live Swifty site. I may have to ask for help….will consult with web host.
Thanks again!You’re most certainly welcome, I can definitely understand why you would want to stick with your Swifty theme. I’m happy you have it configured in a way that works for you.
One suggestion for migrating your site to the live host is to use our Total Upkeep backup and restore plugin. With Total Upkeep you’ll have the ability to download your plugin to a link in the cloud and then easily upload and restore it to your live destination. All you need to do is download the plugin on both sites and follow these instructions for migrating a website with Total Upkeep.
Thanks so much for the tips, Brandon! I will study them later today and get back to you if I get stuck.
- The topic ‘How Can I Make the Hamburger Menu Appear On Desktop Screen in My Swifty WordPress Theme?’ is closed to new replies.
