I'm having an issue with the Twitter Bootstrap template. At http://www.tjprizbiz.com/new/publications.html, I am trying to have my side bar nav jump to each different project, but since all my projects are contained in a span9, anytime I click a side nav bar option it just goes to the top of my container span9 projects column. I know I need to fix my href of the sidebar nav buttons but I don't know how to make it search within the span9 section id's. Any Ideas?
PS: I cant get my code to paste but you can get the page source # www.tjprizbiz.com/new/publications.html
Related
I want to convert this HTML site to Wordpress using Elementor. as you can see all navbar links have their own icons, I can design it by sepread icon and text below it but also I want it to be dynamic (can be managed in WP nav menu page) is there any elementor widget to do that? or can be done programmatically using codes?
search "Elementor vertical side menu" or something similar you'll find some solutions.
Thi is an example:
Elementor Vertical Header with Sidebar Navigation Menu in WordPress | Elementor Side Vertical Menu
I have a webpage with multiple sections. We can navigate from one section to another with a nav bar fixed at the top of the page (with sticky position).
When I am in a certain section on my page, I want the corresponding title on the nav bar to be a different color to indicate that this is the section we are on, but I don't know how to do it.
I need to do it with css only (not javaScript).
Thank you!
You may want to have a look at the scrollspy plugin
https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
I have added the bootstrap collapse bar to my menu, it is working as it should, however since I have a unique nav bar that is in a fixed footer, it's not expanding and showing the nested content when the button is hit.
My educated guess is because it drops DOWN and there is no space under my footer as it's the lowest element on the page. Is there a way to make the direction go upward?
Here is a link to the site, so hopefully the source code will be enough. If not please let me know what you would like me to post on here.
It's also important to point out that I've tested this in the header and it does not function there either...
I'm implementing Foundation 5 on one of my sites. I have the top bar mostly working. However, I want to be able to collapse a set of nav links into a dropdown menu at a certain breakpoint.
Basically, instead of just collapsing from the full nav to the one mobile nav dropdown, I want an intermediate step that first collapses to 2-3 links, and then only on very small screens collapses the rest of the way.
I've been looking around for how to do this and am not finding it in the documentation. Any ideas?
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.