Solved

Adjusting a class that is in bootstrap.css

Posted on 2014-04-12
10
202 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 53

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 250 total points
ID: 39999960
Try this in your custom.css:
.pull-right {
display: none;
}
0
 
LVL 53

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

717 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