I created a "one-page scroll" responsive site. In the navigation items I added the following code to make the page jump to that specific section:
// For example the contact menu
Contact
// Then in the contact section I added this
<a name="contact"></a>
This works perfectly in the full width website.
However, since my site is responsive, in the mobile view, when I click on "benefits" for example, it does jump to the benefits section, but it adds the height of the menu. Is there a way to not get all that height?
You can view the page here.
Related
So, I'm working on a page implemented with Bootstrap 4 and using anchor/hash-based navigation to take users up and down the page. What I'm unclear about is how to control what is actually in view when the page auto-scrolls to the anchor fragment?
Essentially, what I'm looking to do is somehow ensure that at least the section heading is visible, and more or less aligned to the viewport. I am using a fixed-top navigation bar
So, what determines what is "in frame" when an anchor is clicked and the page scrolls to the anchor location? Is this a question of keeping the anchor elements a certain size? So, in essence, what do I need to do via css or html to get section heading in view when they're clicked?
i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
I'm creating an ordering website with a layout like this and I'm still an amateur in creating a website so I want to ask how will I link the SIDEBAR and MENU BAR that when clicked, it will display in the container of the PRODUCTS only and in the same page like in frameset. Thank you.
HERE'S THE LINK OF MY LAYOUT:
http://tinypic.com/view.php?pic=zn2w8&s=8#.VIe0nzGUeAk
use an a href tag on both sidebar and menu bar with an anchor set, where the a tag has classes that will be opened in an iframe like fancybox.
http://fancybox.net/
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.
Two pages, one with <a href='some_url#some_name'>, and second, on some_url, with <a name='some_name'>.
So after clicking on URL1, page 2 loads, and URL2 is on the top of the the page.
Now about the problem: this URL2 hidden under twitter-bootstrap's top menu, which have fixed position.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I'm tried both Firefox and Opera, it seems no browser dependency.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I guess you are referring to the link in the navigation span on the left of each page. If you look at the css, specifically the docs.css file, which contains the style rules for the documentation website, you'll find out that every section has a padding and that's why they don't appear below the navbar.
As you can see the section does start hidden by the navbar, but the padding moves the content down so it became visible.
Hope this helps.