Improve company productivity with a Business Account.Sign Up

x
?
Solved

Adjusting a class that is in bootstrap.css

Posted on 2014-04-12
10
Medium Priority
?
210 Views
Last Modified: 2014-04-15
Hello

I have a really small request, but what better place to ask it.  Who knows, it might be more complicated than I think!

In my next comment I will put a link to a test site.

There is a drop down menu that is controlled at least initially by bootstrap.css

I of course don't want to touch bootstrap.css

I just want to fix this one little dropdown.

See attached.  

I want it to be higher in the page.   I think I would want a top-margin: -20px;

So how can I do this?

Tahnks!
dropdown.jpg
0
Comment
Question by:Rowby Goren
  • 5
  • 3
  • 2
10 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39996736
Hi

Here's the link to the development site:

test site

The drop down is near the top right of the page, and needs to be moved up via css -- about -20px

I have a custom.css file....

Thanks for your thoughts and comments.

Rowby
0
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 39996865
You actually need 26px.
Change this in your HTML (line 404):
<div class="pull-right limitbox" style="margin-top: -26px;">

Or, if you want to use the custom.css, give that div an ID and add margin-top: -26px; to it's style.

HTH,
Dan
0
 
LVL 55

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 total points
ID: 39996944
I would wrap the h1 tag above it in a container div, then place the h1 and form in the same container and float it.  

In bootstrap make each element on the left or right for anything above a small screen and force to two separate rows for a extra small screen.
<div class="row">
      <div class="col-sm-10 col-xs-12"><h1>Pepperdine Tribute</h1></div>
      <div class="col-sm-2 col-xs-12">
                <!-- place form code here -->
      </div>
</div>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39999937
Hello,

After speaking with the developer of the gallery program, he suggested I simply us css to hide the dropdown.

I would prefer that approach, since I really don't need the dropdown and would prefer not to modify his html code.

So here is my slightly adjusted question.

Link to Development page

If I add display:none to the div then it hides it.

select[multiple, select[size] {
    display: none;
    height: auto;
}

Open in new window


But that is in bootstrap.css and I don't want to touch bootstrap.css

The above code is within "div class "event" (I think!)

If that is the best approach, what would I put in my custom.css

Or is bootstrap's pull right {
float: right

....the one the best modify. (Also, of course in bootstrap.css)

For example,

div.event select[multiple], select[size] {
   display: none;
    height: auto;
}
?????

Thanks Rowby  

(Of course will be splitting points.)
0
 
LVL 35

Accepted Solution

by:
Dan Craciun earned 1000 total points
ID: 39999960
Try this in your custom.css:
.pull-right {
display: none;
}
0
 
LVL 55

Expert Comment

by:Scott Fell, EE MVE
ID: 39999996
Just use your custom.css
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40000119
But won't that affect all of my .pull-rights ?  

That is, any bootstrap ".pull-rights" used elsewhere in the site?

Could it be something more specific such as:

div.event select[multiple], select[size][b] .pull-right[/b] {
   display: none;
    height: auto;
}

Open in new window


Not sure if I got the above correct including spacing before the .pull-right

???

Rowby
0
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 40000125
Then give an ID to that particular pull-right.

Or, better, define a class IWantToHideThis in your custom.css

.IWantToHideThis {display:none;}

and change this in the html:

<div class="pull-right limitbox IWantToHideThis">
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40001996
Hi

I was able to add this to my custom css
div.pull-right.limitbox {
    display: none;
}

Open in new window


And that got rid of it!

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 40001999
Thanks Scott and Dan

Thanks for educating me and helping me troubleshoot it!

Rowby
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question