[Solved] Help With Matching Navigation Style

[newmanslibrary]

Hi, I am very new to CSS and am trying to learn some things on my own. It’s not going so well! I use Weebly as a web-builder service that basically has templates you just add stuff to. But if you want to modify a template, you need to work in the CSS code, and this is where I am having trouble. I have two templates I am working with (let’s call them templates A and B). I like elements of each but not one as a whole, so I am trying to match the parts I like. I like the navigation style of template A, so I am trying to modify the code on template B to mimic the same style. I have gotten close but not perfect. The style of A has drop down menus from the navigation bar that are semi-transparent. They are a very light gray but you can see the page behind it. When I try mimicking the style on B, I can either get a solid gray background for the drop-down menus, or a completely transparent – but not somewhere in the middle like the style I like. I have the codes for both templates. I will copy and paste the navigation portion of each one so maybe someone can help me mock up the one I want to use.

The issue I run into is that Weebly has files preinstalled that it references in the coding. You will see that template A references a file called “submenu-bg.png.” Normally I can save any file from one Weebly template, and then add it to another template, but this file is essentially blank when you open it. There’s nothing for me to save (my computer just tries to save the entire website – it doesn’t recognize there is an image anywhere, so I can’t save or copy it). You notice that when I copied and pasted the code from A to B, because I don’t have that submenu-bg.png file in B, I am not getting the desired effect. Or maybe that’s not it, I don’t know. Pasting in the code makes template B have a completely transparent dropdown menu background. This makes the menu hard to read. I would prefer the semi-transparent style that is in template A.

Can someone please help me? Thank you!
I will paste in the CSS code for the navigation areas of each template. If the change needs to take place in a different section of the coding, please let me know.

[MOD EDIT – Codedump Removed]

[Paulie_D]

Unfortunately, extensive CSS code dumps are of very little use as they are usually incomplete and, without the associated HTML are hard to parse.

A link to the actual site would be of more use but it would be helpful if you could restrict your requirements to one thing at a time.

You should be aware that these web page builders are usually quite limited in what they will let you do.

[newmanslibrary]

Hi Paulie,

Thank you for your response. I understand that these formatted website builders are tough to edit. I’m going to try anyway! If you are willing to take a further look, here are the links to the two sites:
Site A: http://441303372802858235.weebly.com/
Site B: http://707005070556600554.weebly.com/

Site A has the semi-transparent background on the sub menus in the navigation bar. That is what I am trying to replicate in the sub menus of Site B (I just happen to like Site B’s overall design better, just not the sub menus).

Any help you can give me would be appreciated. Thank you!

[Atelierbram]

If you use the absolute-url-path to the small semi-transparent tiling image, then it will work:

#wsite-menus .wsite-menu li a {
    font-family: 'Oswald', Impact, sans-serif;
    color: #888;
    font-size: 16px;
    background: url(http://441303372802858235.weebly.com/files/theme/submenu-bg.png) repeat top left !important;
    border: 0;
    text-transform: uppercase;
}

@newmanslibrary Quick tip: use webdeveloper tools: Chrome Devtools, or on Firefox developer tools or Firebug; gives info about missing images right away, besides many other things.

[newmanslibrary]

Atelierbram – holy cow, you did it! Thank you so much!! I would have never been able to figure that out.

I primarily use Chrome, and am interested in Devtools; I just have a lot to learn. Thank you again! I will probably be back for more help soon, but this solves this problem.

[Atelierbram]

@newmanslibrary Glad to be of help; you will be able to more easily solve problems on your own, and probably accelerate your learning curve too, as soon as you figure out chrome devtools

[newmanslibrary]

@Atelierbram,

Help! All of a sudden my navigation isn’t working like it did (it doesn’t look fixed as we fixed it before with the semi-transparent background on the drop down menus). I didn’t change anything with the coding, but I did change my header image, so I wonder if that affected it somehow? I don’t know. Can you please help?

The website is at http://www.newmanslibrary.com/

Thank you!

[newmanslibrary]

Also, for some reason, if you drop down the menu called OWL, and hover over the sub menus, the hover color extends a lot past the confines of the nav menu. That wasn’t like that before. I don’t know what is wrong with it. All I did was change the image of the owls in the header. I did not touch the code after you helped me fix it last time. Argh!

[janet4now]

I think you disabled the site A so the transparent png can no longer be fetched off the server. Whatever that link is that you use in the css, it has to work.

As for the width of the submenu under “owl”, all the submenus are the same width. In this case, they are 200px. It might help if you align your menu to the left giving more room for that area on the right.

Everything seems to be inline styling and I have no experience with weebly or how to specifically fix it.

[newmanslibrary]

Thank you, both of you! I reinstated the other website, so now it works again. It’s a random URL so I don’t think my students will stumble upon it (it’s an old version of my website that I no longer use).

As far as fixing the look for the submenus for OWL: do you think there is no way to change the submenu hover for just this particular page on my website so it is less than 200px? I did left-align the nav bar giving the last page a bit more room on the right for the submenus to drop down, but it still hangs over the main content of my page, which looks weird.

The odd thing is when I am editing, the dropdown menu looks fine (it actually opens to the left, not the right), but I can’t get it to look the same once it is published. I’m attaching a screenshot so you can see what I see in edit mode. I am unsure why the live version doesn’t look the same. Any thoughts would be appreciated.

Screenshot: http://goo.gl/gxvphU

[Paulie_D]

The submenus actually aren’t submenus as we would normally expect them to be structured with ‘normal’HTML.

They are actually absolutely positioned divs containing other menus which then function as submenus.

I’m guessing this is a ‘thing’ related to the Weebly platform and that the interaction is controlled by javascript.

With a lot of element inspection and very specific CSS you might be able to tweak the code to do what you want but it would, in my opinion, not be a robust way to proceed.

Unfortunately, Weebly doesn’t seem to be a flexible as you would would like it to be.

[newmanslibrary]

Thank you everyone for your help. When I started my library’s website, it was about 6 years ago and I had no interest in coding, which is why I used a template and service like Weebly. As I begin to learn more, I realize I am limited by what I can do with the template. I appreciate all of your feedback and perhaps I will start learning CSS!

[Author]

Posts