Solved

Adjusting a class that is in bootstrap.css

Posted on 2014-04-12
10
195 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 48
CSS alignment question 8 37
css question 1 32
Bootstrap css to change alignment without using padding 3 27
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

706 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now