I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
Related
I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
I need to show different Ionic lists in a tabbed menu. The problem was include those tabs with the slide option. So i found this: tabbedSlideBox.
Made it work, edited it's styling to go with my app. But I can't get the tabs menú to stay fixed and don't move.
I made a pen to show you my problem: http://codepen.io/anon/pen/qdjxrB
Line 21 you can see the style inline with the fixed property that doesn't work. It keeps moving with the content, which is the opposite of what I need, I need to be able to move the list up and down and the tab menu should remain in it's place, but it should be able to move to right and left.
I believe it has something to do with the translate3d, but I can't figure out how to solve it without breaking the whole thing.
Tried to modify it's directive but I ended up breaking it..
Hope someone can help me.
Thank you.
EDIT
I've been reading about fixed positioning and absolute3d transitions, and they don't get along, the fixed element behaves as it was absolute positioned because it takes it's container as reference for the positioning: http://codepen.io/markdebeer/pen/qrBDm, but if anyone comes with a solution to this i'll be grateful.
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I'm having trouble finding some good resources or even an example of the kind of site I'm trying to build.
Essentially it is a one page, horizontally scrolling site with a fixed header and footer at the top and bottom. Rather than scroll using buttons or a scroll bar, clicking on the links in the nav menu would move the page across, most likely using jQuery, to the respective section.
In other words, just for clarity, the header, footer and background always remain in place and it is the main content section which moves left and right. So there would be half a dozen or so floated divs stacked in a single row.
I have that basic framework laid out, but I can't figure out how to allow the main content section to extend past the window size, allowing for all these divs to float in a line.
Here is a crude/minimalist demo of what I have: http://jsfiddle.net/U8ZYT/
I would appreciate any links to tutorials, examples of similar websites or any direct suggestions.
Try using jcarousel..its pretty easy to make it do exactly what your loking for and theyve got some pretty good examples to get you started
http://sorgalla.com/jcarousel/