Solved

Adjusting a class that is in bootstrap.css

Posted on 2014-04-12
10
200 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 34

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 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 34

Accepted Solution

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

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 34

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

828 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