I am learning css and try to do a wordpress. I did a child theme as recommended, and works on implementation.
I have a problem on menu alignment ; The primary menu is actually on the left side. I would like to put it on the right side. I know that I could use secondary menu but my question is just to understand how to modify a wordpress by css :)
The template is Reykjavik.
I tried vary solutions in the style.css child folder, like :
.main-navigation {
margin: auto;
}
to enlarge the main navigation zone, and next
.main-navigation-container ul {
float: right;
}
to put the menu in the right side of the screen but nothing works...
Also proved to work on padding but nothing changed..
Are you able to tell me were I'm doing something wrong please ?
Thank you for your help,
Jerry
Edit :
`
<button id="menu-toggle" class="menu-toggle" aria-controls="menu-primary" aria-expanded="true">Menu</button>
<div id="site-navigation-container" class="main-navigation-container">
<div class="mobile-search-form"><form role="search" method="get" class="search-form" action="http://localhost:8888/wordpress/">
<label>
<span class="screen-reader-text">Rechercher :</span>
<input type="search" class="search-field" placeholder="Recherche…" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Rechercher">
</form></div><div class="menu"><ul id="menu-primary" class="menu-primary" aria-expanded="true"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9">Accueil</li>
Page test
Skip to menu toggle button
`
Add width attribute, it should move to the right in that case. Because currently width of navigation div is 100% so it has no where to move.
Ok i found a solution, which is not the best way I thought but resolved.
It is to set :
.main-navigation { position: relative; margin: auto; margin-right: 0px; }
Because setting width at 100% it goes over the logo (test in the example).
Change ul width to 100% and text-align to right. Child li will be display inline-block so they will behave like a text and move to right side.
Related
I don't have much experience in coding but eventually I manage to create a blog in Blogger. After several attempts to customize, I run into a problem with my main navigation bar. The problem is unless you are at the top of the page, the bar will expand as you scroll and cover the post underneath, which is extremely annoying.
I notice that my three-line navicon ("fa fa-bars") is also having a problem which is being not in the middle of the bar so I use my browser inspect function and find out that the container box ("indzign-box") is misplaced.
Is it that container box cause the irregular expansion of my navbar or something else and how to fix it?
/* Main Navigation */
nav.fixnavbar{position:relative;display:block;width:100%;background:#778595;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
.fixednav{position:relative;margin:0 auto;padding:0;max-width:1010px}
.fixednav li{display:inline-block;}
.fixednav li a{display:inline-block;padding:20px;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;}
.fixednav li a:hover{background:#6c7a89;color:#fff}
.nav-icon{display:none}
nav.fixnavbar.main-nav-scrolled{position:fixed;top:0;left:0;opacity:.97;-webkit-transform:translateZ(0);transform:translateZ(0)}
/* Box Info */
.fixednav li.indzign-box{color:rgba(255,255,255,1);z-index:2;font:normal 24px FontAwesome;cursor:pointer;float:right;display:inline-block;padding:18.5px 20px;transition:all 0.5s ease-out}
.icon-box{background-color:rgba(66,133,244,0.8);padding:8px 13px;border-radius:100%;color:rgba(255,255,255,0.5);margin-right:5px}
.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
.notif-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;cursor:pointer;text-align:left}
.notif-info:hover{opacity:0.8}
.notif-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px}
#indzignbox{background:#fff;color:#333;font-size:13px;top:-381px;right:306px;padding:20px;position:fixed;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:100;transition:all .5s}
#indzignbox .closebox{background:none;color:#999;padding:4px 6px}
<nav class='fixnavbar'>
<button class='nav-icon-position nav-icon' type='button'>
<span class='icon-line'/>
<span class='icon-line'/>
<span class='icon-line'/>
</button>
<ul class='fixednav' id='togglemenu'>
<li><a href='/'>Home</a></li>
<li class='indzign-box' onclick='document.getElementById('indzignbox').style.top='60px';document.getElementById('count-box').style.display='none';'><i class='fa fa-bars'/></li>
<li><a href='/search/label/list'>List bài viết</a></li>
<li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
<li><a href='/search/label/review'>Gundam Reviews</a></li>
</ul>
</nav>
Thank you in advance!
The cause of this problem is the padding property of .fixednav li.indzign-box
Just change the padding from padding:18.5px 20px; to padding:8px 20px;
I’m working with a mat-tree in my Angular 7 application. It looks like this:
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
<mat-tree-node *matTreeNodeDef="let node">
<li>
<span *ngFor="let item of getArrayForIndenting(node)"> </span>
<button mat-icon-button disabled></button>
{{ node.name }}: {{ node.value }}
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<div>
<span *ngFor="let item of getArrayForIndenting(node)"> </span>
<button mat-icon-button matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
{{ node.name }}
</div>
<ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</mat-nested-tree-node>
Notice that each node is spaced really far apart vertically. This is what I’m trying to adjust.
I’ve tried everything. I’ve tried styling the height of various elements in the above markup, the line-height, the margins, the padding, etc., but nothing works.
According to this site:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_compact_css
I should be able to set the line-height on the ul element, but I tried that and it doesn’t work.
Can anyone tell what I’m supposed to do? Thanks.
EDIT: Here's the CSS:
.example-tree-invisible {
display: none;
}
.example-tree li,
.example-tree ul {
list-style-type: none;
}
Note that I removed the "mat-tree-node" class 'cause it didn't exist.
There's also a reference to fonts.googleapis.com in my index.html file:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
...which is probably what mat-icon-rtl-mirror comes from.
Hope that helps
Yes, you are right you should be able to set line height of ul or li elements. However, you have not pasted the css for the above code. Please give us css or create https://plnkr.co/
so that we can debug and help you. It is also possible that you may have margin or padding in ul or li element, check that as well.
just use .css to override min-height, e.g.
.mat-tree-node {
min-height:1.6rem; //min-heigth:0 if you want the min heigth possible
}
The only working way I found with angular 8 on a nested element (and nested tree) is
.mat-tree-node {
min-height: 1.2em !important;
height: 1.2em;
}
In the image below it shows an image , textbox and a css menu image
My CSS menu is perfect. I finally got it the way I needed it. My problem is that I need the textbox in the center of the nav bar and then I need my image to the left of the textbox
to be all the way to the left. I don’t know how to do that. I have tryed this:
<!-- Advsearch -->
<li class='active'><a href='#Searching'><span>
<form method="get" STYLE="FLOAT:CENTER;" action="/search" id="advsearch">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
And for the image I tried float:left
I made a jsfiddle for you to help me:
Js Fiddle
http://jsfiddle.net/TxeVt/
You can use the
correct { margin: 0 auto;} not { float:center }
and you are using float:center, center is not element float element are available is left, right, none, inherit Ok dude
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}
I'm using twitter bootstrap. It has collapse module.
I'm using it like this.
<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>
This is the collpasediv
<div id="collpasediv" class="collapse in">
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>
I would like to move half of the circle of circlecount outside the collapsediv.
By default bootstrap applies overflow:hidden attribute for collapsediv.
I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks
PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.
Thanks
In the stylesheet for the twitter bootstrap there is the following declaration:
.collapse.in { height: auto; }
Add to it like this:
.collapse.in { height: auto; overflow: visible; }
Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):
.collapse.in { overflow: visible; }