I'm using a Mediawiki Bootstrap theme and have managed to center the nav pills. However, now when you click on the Search button to expand it, the search box moves up a bit. The site is here.
I tried making the height of the nav pills section bigger as I thought maybe it just couldn't fit, but that didn't help any.
Any ideas?
The alignment of the search box is coming from the CSS style
#media screen {
.navigation .navbar-search {
display: inline;
float: none;
position: relative;
top: -2.25em;
}
}
If you set the top to 0px the alignment looks good to me.
Related
I am trying to modify the CSS code for the underlying Worpress theme for this site: https://isspm2021.webs.upv.es/. The theme is this one: https://wordpress.org/themes/escapade/.
What I am trying to do is get a vertically scrollable left menu when the screen size is, say, 1024 × 768.
This is what I get now:
As you can see, the last items of the left menu remain hidden and inaccessible, depending on the screen size. I would like the left-hand-side menu to be vertically scrollable when needed.
I've tried several CSS instructions, like overflow:scroll, without success.
I think it is because of the theme itself; more precisely, because of the way the different div elements are defined to be placed regarding others (position:relative and so on).
Any hint of how to modify the CSS style of this theme to get what I need?
I would suggest these for the menu to be scrollable:
Set a height for the menu part,
Set Overflow-y:auto;
Here's the solution:
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
Also, If you want the scroll to appear when the browser size is less than 1024px, put the code below:
#media all and (max-width:1024px){
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
}
The above are two options.Please don't insert both of them.Only use one at a time to see the changes.
If you can accept the full left navbar scrollable, you may add overflow: auto property in .side-masthead:
.side-masthead {
background-color: #f5f5f5;
overflow: auto; /* Add overflow property */
}
Unable to set the main nav to right align. Please see site: accessatx.com. Also, can it be set to be inline with the logo (under the button)?
Using Wordpress, theme: Avada. Tried float: right in CSS and failed.
change in your css like this
.fusion-header-banner{
padding-top: 19px;
}
#menu-main{
display: inline-block;
float: right;
}
output you get like this
After playing around with my header and and main menu it seems the link box is not actually aligned with the text. I tried playing around with margins and padding but I can't seem to get it to work or find the right class. I would like to keep everything where it is currently and just move the link areas to the right so everything aligns. Any input is appreciated.
Website: http://museiam.ca/
This is happening because you have:
.main-navigation ul li a, .menu_centered_style .gbtr_first_menu li
{
left: 40px;
}
Removing the left: 40px; should fix this.
EDIT: Try adding the following styles
.menu_centered_style .gbtr_first_menu ul
{
margin-left: 108px;
}
.menu_centered_style .gbtr_first_menu .shopping_bag_centered_style_wrapper
{
margin-left: -24px;
}
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
I've been asked to change the layout of this charity website:
http://antidotemarketing.com/youthlife/
I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.
This must be done using CSS only.
So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)
One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.
Thanks everyone :)
OK, I think I finally understand what you are after. Try adding the following styles:
#logo {
position: absolute;
top: 80px;
z-index: 100;
}
#login #logo {
position: relative;
}
#page {
margin-top: 45px;
}