I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}
Related
On the WordPress theme I am working on https://themes.getmotopress.com/2019/ the menu turns into a circle and excess menu items are put into this when the screen resolution decreases.
I would like to stop <div class="main-menu-more"> from showing and all elements become listed in the main container. I have used the code
.main-navigation .main-menu-more {
display:none;
}
Which hides the more menu however the elements inside do not show?
Try this style I hope this will work for you but you should have to upgrade style according to your requirement
#media (max-width:500px){
.submenu-expand{
display: none;
}
.main-navigation .sub-menu {
background-color: transparent;
position: relative;
opacity: 1;
left: 0;
}
.main-navigation .sub-menu > li > a, .main-navigation .sub-menu > li > .menu-item-link-return {
color: #0073aa;
}
.sub-menu:hover{
position: relative;
}
}
I checked out the source codes of the WordPress you are currently working and determined that by deleting the word "toggle" from class="submenu-expand main-menu-more-toggle is-empty" which will become class="submenu-expand main-menu-more is-empty" will no longer hide the menus in the circle, but will simply become part of the responsive webpage.
The code came from the button section of your WordPress. Simply search for the class attribute with a value of "submenu-expand main-menu-more-toggle" using the search function on your text editor and delete the word "toggle" from it. It worked for me.
Let me know how it went.
I have a problem with one menu item that appears to be left-aligned rather than centered as the rest of the menu items.
link to site
You can see that there is a smaller space between the first and second menu items. (site is RTL so first from the right)
Can anyone help me solve this?
Your stylesheet contains the following:
.fl-page-nav-left .fl-page-nav ul.navbar-nav>li:first-child a {
padding-left: 0;
}
You can find this in your stylesheet and remove it.
Alternatively, you can add the following CSS:
.fl-page-nav-left .fl-page-nav ul.navbar-nav>li:first-child a {
padding-left: 25px !important;
}
Your first menu item (from the right) has been styled with the following CSS:
.fl-page-nav-left .fl-page-nav ul.navbar-nav > li:first-child a {
padding-left: 0;
}
This piece of css is used for a styling in a non-RTL website; the padding is on the left side of the menu item. Change it to:
.fl-page-nav-left .fl-page-nav ul.navbar-nav > li:first-child a {
padding-right: 0;
}
I have a menu and I want the last menu item to be a red button. I want it to look like this (and if possible with no gap on top between menu and the blue line)
but is like this:
My problem is that when I change the top padding/margin I can not align the text of this item with the rest of the menu items.
This is the code I'm using:
.fusion-main-menu .fusion-last-menu-item a{
background:#FE6C59;
color: #FFFFFF;
text-align:center;
display: block;
margin-bottom: 10px;
padding-right:5px;
padding-left:5px;
vertical-align: middle;
height:60px;
}
I keep experimenting with margins,paddings and height but can't get it to the form I want it. Could you help me? The site is: tfs-sl.com
Inside the link there is a span element. Put your styling on that one:
.fusion-main-menu .fusion-last-menu-item a span {
background:#FE6C59;
color: #FFFFFF;
padding:4px;
}
I tried a lot but i,but unable to fix the content in the center of the navigation bar.
but can able to fix that in left or right. the following is the code i used.
<h4 class="navbar-text navbar-center">Mytitle </h4>
Try this -> JSFIDDLE DEMO
First you have to remove the generic classes of bootstrap.
We do that by resetting the float:none option !
Then we center the content using text-align:center.
CSS:
#example .navbar .nav,
#example .navbar .nav > li
{
float:none; /*To remove the inbuilt float option*/
display:inline-block;
}
#example .navbar-inner {
text-align:center;/*To center this*/
}
.navbar .brand{
float:none; /*To remove the inbuilt float option*/
}
http://jsfiddle.net/yHprm/220/ something like this but... depends if you have something else there... it will help somemore code.
.parentDiv {text-align: center}
Please try it
.navbar-text {
width: 92%; /* new edit */
text-align: center; /* new edit */
}
Variations on this question have been asked many times. Vertical centering with CSS is a challenge.
I have a particular scenario, dealing with a list displayed horizontally. The markup is like this:
<ul id='ul1' class='c'>
<li><a href='javascript:void(0)'>Fribble Fromme</a></li>
<li><a href='javascript:void(0)'>Fobble</a></li>
<li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
</ul>
The style is like this:
ul.c {
height:52px;
text-align:center;
}
ul li a {
float:left;
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
line-height:1em;
width:100px;
}
ul li a:hover {
background: #CCC;
}
ul li {
height:52px;
display:inline-block;
}
The resulting list looks like this:
But I want all the boxes to be the same height, and I want the text to be vertically centered in each box. I can set the box-height by adding a height style for the A elements. The result looks like this:
...which is close to what I want, but the vertical-centering isn't happening.
I can set line-height for the text, as suggested in this post, to do the vertical centering. I can even pick different values of line-height for different A elements, if I know which of the elements will get multiple lines of text. But I don't know which ones will require multiple lines.
How can I get it to center when some of the A elements have text that wraps?
Old question, but the answer can now be updated with Flexbox.
a {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
You could use display:table, etc. along with vertical-align:middle
ul.c {
text-align:center;
display:table;
}
ul li {
float:left;
}
ul li a {
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
width:100px;
height:52px;
display:table-cell;
vertical-align:middle;
}
ul li a:hover {
background: #CCC;
}
Example: http://jsfiddle.net/kf52n/2/
I could not figure a way to do this in CSS. I found that I could do what I needed with Javascript, setting the padding-top and padding-bottom to appropriate values at runtime. The technique is to measure the "natural" height of the A element, then set the padding so that the A element is vertically centered.
here is the necessary js code:
function setHeightIntelligently(ulElement) {
var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
naturalHeight, pad;
items = ulElement.children;
for(i=0, L1 = items.length;i<L1;i++){
if (items[i].tagName.toUpperCase() == 'LI') {
anchor = items[i].children[0];
naturalHeight = anchor.clientHeight;
pad = (availableHeight - naturalHeight)/2;
anchor.style.paddingTop= pad+'px';
anchor.style.paddingBottom= pad+'px';
}
}
}
function init() {
var element = document.getElementById('ul1');
setHeightIntelligently(element);
}
In the CSS, one must not explicitly set height or padding for the A elements. Doing that would cause the "natural" height to not be what we need it to be.
The result is like this:
To see it in action, go here.
in the css you have set the height and line-height to the same. Then you will get a rectangular box.
But still you are seeing space in the bottom the reason is due to padding
adding two values in padding adds top and bottom padding
padding: top bottom;
since it is 2 and 12 you are seeing huge space.
try this
height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;
let me know it is working
line-height:250%; worked for me