Need To Do Two Things

  • Unknown's avatar
    pinemtnschool · Member ·

    One is single page specific and I have it halfway the way I want. On ourContact page. We wanted to add a Google Maps widget which I have in. I didn’t want to just be sitting on the page pushing the contact form down. I used `#map {
    margin: 1em 1em 1em 40em;
    height: 1em;
    }` to get it to sit in the blank space to the left. The only issue is on mobile or when you shrink the browser screen it disappears I was using px instead of em at first and was hoping em would fix it and it didn’t so now I’m lost haha

    Secondly, for the entire website between the site Title and the Search Bar at the top we’d like to add a “Support” or “Donate” button rather than having it be in the main menu. What would I use to accomplish that? Just sectioning off a section of that to make a hyperlink box type deal.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, on the first thing, replace your #map rule with the following, including the second rule, the Media Query. What I have done is to float the map to the right, down to the point where it starts to overlap the contact form, then I float it to the left and make the contact form div full width so there aren’t any conflicts. See what you think. 

    #map {
	float: right;
	height:auto;
}
@media screen and (max-width: 750px) {
	#map {
		float: left;
	}
	#contact-form-3 {
		float: left;
		width: 100%
	}
}
  • Unknown's avatar
    thesacredpath · Member ·

    On the donate/support button, adding one to the header area is quite challenging on a responsive designed theme such as Organization. What I might suggest would be to style your menu item differently from the others so that it stands out. This is just an example. See what you think, and you can of course edit the color code as desired. 

    .menu-item-199 a {
    background-color: #ddbb00;
    text-shadow: 1px 1px 2px #000;
}
  • Unknown's avatar
    pinemtnschool · Member ·

    The map work wonderfully! I need to try and remember the media query stuff for the future it’s fixed so many issues and I always forget!(I never learned it in my CSS classes).

    As far as the Donate/Support button I suppose I didn’t clarify what I meant well enough. Or your code didn’t work as intended(it changed the color of the support button that already exists). We want to get rid of that menu item on the menu bar, but add a new space onto the page.

    As in box off a new space here which will link to an external page. So, a way to section off that with a little box and text is what we’re looking for. However recoloring the one in the menu bar may work if what I’m suggested really can’t be achieved with this theme. I’d have to speak to my boss.

  • Unknown's avatar
    thesacredpath · Member ·

    You can add a donate button within the header area, but as I mentioned, this is very difficult to do. While on your computer, if you narrow your browser window and watch what happens to the header area, you will see that we quickly run out of any space to put a button.

    The only way to do this is to use position: absolute; which means that the button would float freely above all other page elements and would eventually overlap with other elements in the header area, such as the title/tagline.

    If you wish to try this, add your button to a text widget in the footer and then we can see if we can make it work on your site.

  • The topic ‘Need To Do Two Things’ is closed to new replies.