How can I remove the sidebar from the following Bootstrap theme? - html

With reference to the following page:
http://coderthemes.com/simple/light/extras-pricing.html
When I try deleting the aside tags, I get a blank placeholder where the left navigation used to be.
How can I delete the left navigation entirely so that the 'Pricing' pane stretches horizontally across the whole of the page?

You need to remove the entire HTML that has the class sidebar-navigation and apply margin-left: 0px; of the element #page-right-content in your CSS.

Related

How do I make a menu and title section sticky using Divi?

I am building a website using Divi, and for a couple of the pages there is a requirement to have a sticky menu, along with a top title section combined as though they were one. Ideally I would like them to remain in their current position and simply scroll with the page without knocking out the formatting.
Code used so far is as follows:
.stickyheader{
position: sticky;
position: -webkit-sticky;
top: 55px;
}
#page-container{
overflow: visible !important;
}
I have tried naming both the title section and menu section with the class name 'stickyheader' in the hope that both would be lumped together. This does appear to make both elements scroll with the page, but the formatting goes out the window and they start overlapping and squashing up at the top of the screen, plus the space at the top of the title section has increased which throws the formatting out for the whole page, as everything has been adjusted to fit over the background image.
Both sections are global, for ease across all other pages as these two elements appear the same on each one.
Does anybody have any suggestions? Is there an easier way to do this?
Thanks in advance!
Sure thing, you can do that easily, making sure that you are using the latest Divi version which has the Theme Builder. With it, you can design a template which can govern a specific page and you can assign a fixed position to any element:
No need to use CSS. You can also take other approach:
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-fixed-header-with-divis-position-options
https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/
https://www.divithemeexamples.com/make-your-divi-4-0-header-sticky-or-fixed-with-the-theme-builder/

HTML relative link links to the anchor covered by the navbar

When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.

HTML/CSS/Ruby on Rails Header with logo that overhangs into page content

I would like to be able to have a logo overhang from a header, see this link for a visual example. From what I've searched, most of the results are about making this happen with WordPress rather than just in terms of HTML/CSS (including the provided link). I'm using RoR alongside Twitter Bootstrap in order to create some quick styling of the page including the header (possibly pertinent information).
I'm guessing the answer to this question really is HTML/CSS-centric, so, if I had a header <div> that included a logo to the left as well as a set of navigation links to the right, how could I go about making that logo overhang into the rest of the page below?
Also, bonus points if the ability to add a slight shadow to the part that overhangs is included :)
You can use the z-index property (CSS) to set your logo image so that it is always in front, then you can position the image in your header and it will look like it's hanging. The slight shadow should be part of the image itself.
Try using css code with
position: absolute;
This will ensure your logo floats on top of wherever you want it. Then adjust how you want to place your logo image with:
margin-top: 100px;
using whatever px you want.

Highlight current link selected anchored to content on the same page

I have a list of links to the left and a fixed div with hidden overflow to the right of a web page. The fixed div is wrapped around 3 additional divs with the same height as the fixed div. Each div nested within the fixed div is linked to one of the links in the list to the left of the fixed div.
This works fine, it essentially simulates a hide/show effect with pure html/css. Now what I have been trying to do is highlight the current link selected in the list of links like you would with a menu item in a navigation bar. I did a similar example in jsfiddle.
I can't seem to be able to highlight the current link with pure html/css so I've been attempting to do it with PHP with no success.
Is there a way to do this without Javascript?
a:focus{
border:solid 1px red;
}
will work partially, but only until focus is moved elsewhere.
If the page is reloaded with each click, then you could use PHP to read the #anchor from the URL and add a class to the appropriate link element.

Placing a google ad breaks my css

I had a page with the right-side layout like this one:
http://www.comehike.com/hikes/search_hiking_groups.php?redirect=yes&radius=&postal_code=
Where you can see the right side have 2 spots: the yellow buttons and the links below.
What I am trying to do is place a google ad on that page. But the way I am doing it breaks the page. Here is an example how it is messing up the right side css:
http://www.comehike.com/hikes/search_hikes.php?redirect=yes&radius=&postal_code=
What am I doing to mess up the css? And how can I fix it?
Thank you!
Your sidebar has a fixed height, so doesn't expand to contain the new content:
.what_to_do {
height: 210px;
}
Remove it.
Try putting it in an iframe instead. That should encapsulate the ad in its own little window which can have independent css rules.
It looks like the side bar is using class .what_to_do, which contains the rule height:210px
I would recommend: instead of setting a fixed height, clear the bottom elements if they are floating, and let it naturally be the default of height:auto;. This lets the sidebar column expand to its contents.