I've read through the forums and have not been able to find a question similar enough to mine for me to fix my website, so I hope someone can help.
I'm building a website for my local school which has a top navigation and a left side navigation. I've written the top navigation as a list and styled in CSS and use Body ID to highlight the navigation item of the page I'm on, that all works great and I'm going to move that to an include in PHP so I've only got one file to update for that.
On each of the sub categories though, I have a side navigation, which is currently manually programmed and manually highlighted, but I'd like to be able to do the same as the top navigation, have a list navigation and have something like Body ID which automatically highlights the left navigation item when it knows it's on the right page. I've tried adding two Body IDs and this didn't work. Is there a smarter way to do it?
Here's my test site which is work in progress at the moment.
http://www.antbird.net/school/
Thanks very much, I appreciate any help I can get.
Ant
You can only have one ID for each element.
However, you can use that <body id=" "> when setting the left nav.
Related
I don't know what this is called, but I've seen it on a few websites where when a div scrolls into view it flows to the top hiding the previous block (well scrolling out of view). It like a slideshow but vertically and shows the content. It's kinda like a normal scrolling web page but brings segments into view.
Does this make sense??
Does anyone know what this is called so I can Google how to do it in css or jQuery.
Thanks in advance
If I understand correctly your question you are searching for sticky position. You can see how to do it here: https://css-tricks.com/position-sticky-2/
I want to create a vertical menu exactly like http://www.bienvillecapital.com/. I have tried few themes having vertical menu and also tried SuperFly menu plugin to get the result. Can anyone help me to get this?
Thank you.
Navigation bars are nothing more than HTML and CSS code aligned properly. I'm not really sure how well you know CSS and HTML, but this can be done with those, and understanding the concept is very direct. Please refer to this page for example: http://www.w3schools.com/css/css_navbar.asp
A client of mine saw this awesome scrolling effect when clicking on a menu item: http://www.feedmusic.com/
I'm talking about the grey/purple overflow between the two anchor menu items.
I've been Googeling around for hours and can't find anything like this. Does anyone know how to achieve this?
Thanks in advance!
It's singlepage application with disabled scrolling. I haven't experience with singlepage, but here are ideas which looks like it could work:
Create two divs between content one gray and second purple (or one with two colors in the background). Then create scrolling via js (jquery) on button click.
If it's ajax loaded, there could be only 3 divs: one with current content, one with gray/purple background and third with new content and js should place the divs to required places. But first solution should be easier.
Implementation is up to you.
I have an asp.net menu control embedded into a div in my website.
My problem is I will have 15 to 20 menus and the menu control looks cluttered when I show all the menus something like the below.
I am thinking of applying css to the menu control however i dont know how i can control the amount of items displayed in the menu. I cant remove the items as they are mandatory. What I need is the first 5 menu has to be shown and the rest has to be shown in drop down list or with scroller like the below screenshot
I need the menu control to be displayed like the below one
or
Can anyone please help me to resolve my issue?
EDIT
I have managed to get all the menus in a single row by changing the list style from list to table.
This has solved my clutter issue however the menus are going beyond the div view width. I tried changing the width but it didnt helped me. how to set the limit to show only few menus and provide scroll support feature to see the remaining menus.
I think you are looking for something like this: http://www.eyecon.ro/bootstrap-tabdrop/
Let me know if it works out, looks promising, but I never tried it.
EDIT
Ok, I tried it. If you want to have specifically 5 of them or similar. You could do something like this in css:
ul.nav > li {
width: 15%;
}
See fiddle here.
(Try resizing window)
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.