I noticed there are some really nice stacks for working with advanced drop down menus and I would love to use them at some point. However since I have spent some time working on color combinations for individual pages on my site I was hoping to just stick with the basic menus you get my dragging one page on top of another. The main thing I want is to preserve all the time I put into choosing colors for active and in-active links. If there is a way to do that with an add-on then I would be fine with going that route.
I had a couple questions on the built-in rapidweaver menus:
It seems like there would be an option to turn off the page that provides the menu? Or is there an add-on that works with the built in page links?
Do I have any control over the built page navigation positioning? Right now I think everything is left aligned.
The styling of navigation is very theme dependent.
So without knowing what theme you are using we can’t really give you a definitive answer.
You can also get help with styling by applying custom CSS. It’s best to provide a URL to at minimum a test page with detailed information on what you would like different.
Again, that can very from theme to theme, and even more with frameworks(e.g. Foundation, Foundry) and addons.
With many themes you can make the “navigation only” page an off-site page and set the URL to a #. That won’t create a page but will create the navigation links.
I am using Mountains Theme. Right now the photo area is set up with a solid color that blends into the image and links that match the photo. Here are a couple examples:
If what you want is just a “navigation” item without a page then set up an offsite page and set the URL to a #:
As for the Mountains Theme and navigation background colors;
For when someone clicks the hamburger menu on smaller screens you can add some custom CSS to change the background from transparent. Try this:
/* This sets the Dropdown menu background color Full width menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,0,.5);
}
@media (max-width:991px) {
/* This sets the n menu background color for mobile menu */
#navbarNav {
background-color: rgba(0,0,0,.5);
}
/* This sets the Dropdown(sub)menu color mobile menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,0,0.0);
}
}
I understand now. I didn’t realize you got to “off-site” by going to the “add” menu. I was looking for off-site in the settings for a regular page. When you are talking about changing the color that is just for the space behind the text? I can see the use of that but I also wonder can the drop down menu color also be inherited form the links that run across the top?
As you can see from image 1 the text “Yes’ The Ladder” uses the default link color which ends up blending into the background image. The red I chose in the links on top helps it stand out.
For image 2 the three bottom links will indent right below the first item under the drop down menu. Do you know why that is? All the other pages don’t do that, the text is left aligned.
I was going to wait to upload the site because I was hoping to at least get the major problems worked out. But yes, once I get it working a little better I’ll upload everything to test, hopefully that will be in a day or two.
Also with image number 1 is there a way to change the color of the text itself rather then the background? I’m just trying to understand all my options. Something I just noticed, the drop down inherits the link color of the current page but not the active page color. Wouldn’t it seem like if it inherits one color it would inherit both? I can’t understand the logic of just bringing one of the two colors over.
If I am starting to get to the stage of needing a stack to do this I’ll consider that too. This is my first site with RW so I am just trying to get through some of these basics!
Okay, I have now published it. The bottom three links are indented on this page somehow. I know sometimes on the phone there will be an indent to show that a menu has been opened but here the result seems totally random to me, there is no pattern why some have the indent. Another strange thing if you click through the other links in the menu the links in the drop down become large although they are all aligned under the other pages.
I just finished up adding background colors to the menus so the desktop is working pretty good. It’s already about 10 times better then my screen capture from a week ago on the desktop. I noticed with mobile the menus blend together with the other pages elements. I haven’t added in the mobile code yet, is the idea of the mobile code to make it function more like the desktop as far as getting the text to also overlap everything else? I know one of the obvious differences is to give it a unique smaller size given the much different screen sizes.
The custom CSS above for mobile is to help the mobile (hamburger) menu when open to have a background color to prevent it from blending into the other parts of the page.
I pasted in the mobile code right after the initial background color code for desktop. The menu items are still blending together but now everything under the hamburger has a background color (where as on the desktop the parent links have no background and only the drop down has a background color.) Right now there is no submenu so I didn’t put in any numbers for that yet. Probably should just delete that part until it’s needed I guess.
Is there anything about the code that is preventing it from overlaying the text on the page?
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,190,.6);
} @media (max-width:991px) {
/* This sets the n menu background color for mobile menu / #navbarNav {
background-color: rgba(0,0,190,.6);
}
/ This sets the Dropdown(sub)menu color mobile menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,0,0.0);
}
First it’s a little difucult to read the code you pasted in but it does look like there is a missing closing bracket }. You can aadd a z-index to get the background to go over the headings.
The order can matter when applying CSS:
/* This sets the Dropdown menu background color Full width menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,190,.6);
}
/* z-index for navbar so background goes over heading */
#navbarNav {
z-index: 1;
}
@media (max-width:991px) {
/* This sets the n menu background color for mobile menu */
#navbarNav {
background-color: rgba(0,0,190,.6);
}
/* This sets the Dropdown(sub)menu color mobile menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,0,0.0);
}
}
Great, that made it work! Can I also indent the text so it isn’t riding right along the left edge of the menu? Then I should be able to copy that code to the other pages.
If you are talking about the mobile menu than I added I rem of left padding here:
/* This sets the Dropdown menu background color Full width menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,190,.6);
}
/* z-index for navbar so background goes over heading */
#navbarNav {
z-index: 1;
}
@media (max-width:991px) {
/* This sets the n menu background color for mobile menu */
#navbarNav {
background-color: rgba(0,0,190,.6);
padding-left: 1rem;
}
/* This sets the Dropdown(sub)menu color mobile menu */
.has-dropdown .dropdown-menu{
background-color: rgba(0,0,0,0.0);
}
}
Perfect, I was able to get almost all the menus going. There is only one page where the heading appears to be blocking the hamburger, meaning that when I try to click on the menu nothing happens. I am not sure why it does that just on that one page and also why it only happens on mobile.
