How to Center Custom Wordpress Theme Navigation bar? - css

Hello Fellow Programmers
I would like to center the navigation and have researched and don't know the code to insert to my custom made theme which I converted from HTML to Wordpress. (I'm a little new to Wordpress Theme Development)
My Custom-made wordpress theme already pulls whatever menu is on wordpress and inserts it in.
But I just need help centering the menu. observe the picture below... The menu is too far to the left.
Here is some relevant code I have currently on the website in my "header.php" which displays the WordPress menu.
(Header.php File)
<nav class="menubar">
<ul id="menu">
<?php wp_nav_menu();?>
</nav>
Image of my navigation menu which appears more on the left side.
P.S. Please help me with simply centering my menu, your response(s) is(are) most appreciated.

.menubar, #menu {
width:100%;
}
#menu {
text-alighn:center;
padding:0;
margin:0;
}

Or you could also wrap the navbar in a wrapper div and give it the same width as the main content of the site(this may or may not be what you're looking for).
<div class="nav-wrapper">
<nav class="menubar">
<ul id="menu">
<?php wp_nav_menu();?>
</nav></div>
.nav-wrapper{
max-width: 1170px; /* let's say this is the width of the main div */
display: block;
margin: 0 auto;
}

Related

Adding a logo to my Navigation Pane using CSS (Squarespace site)

I'm trying to add in a sponsor logo into the top right corner of the Navigation Pane of my website using CSS.
Here is my website link: www.headlightshortfilm.com.au
Does anyone know how to do this using CSS? Squarespace can't help me so I was about to pay a Squarespace specialist to do it but I feel it must be pretty simple. I thought i'd try here first :)
Add this Div after your <div id="topNav" style="padding-right: 0px;"></div>
<div class="sponsored-logo">
<img src="imageURL">
</div>
Add this class on your stylesheet
.sponsored-logo {
float: right;
}
Add float: left; to your #logo and #topNav
Hope this helps.

Add adsense banner next to my logo in header (wordpress)

I have a logo in the header of my wordpress site and I would like to add an adsense banner next to it like this :
For my logo, I have a div logo and this css code :
#logo { float: left; margin-top: 60px; }
I know I need to create a new div for my adsense code but what css code should I use so the adsense banner appear to the right just next to the logo ?
I need to make sure that both div will never be superimposed (on all devices).
This should work:
HTML:
<div id="logo">
Some code here for the logo
</div>
<div id="ad-banner">
Ad banner goes here
</div>
<div style="clear:both;"> </div>
CSS:
#ad-banner
{
float: right;
margin-top: 60px;
}
Putting the HTML in the header-middle div and the #ad-banner style into the style.css file. It should work.
Open WordPress Editor
Open the header.php file
In this file – look for the following code
<header id=”masthead” role=”banner”>
Make the following change to the hgroup tag by adding style=”display:inline-block”
Immediately below the hgroup tag, add the Ad (Google AdSense) Code inside a span block as shown below:
<span style=”float:right”>
<!– Paste Ad Sense Code below–>
</span>
Save the file
Source: http://techzog.com/wordpress/how-to-add-banner-ad-to-wordpress/

How to fix clickable background with Wordpress theme and CSS

I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">

How to make twitter bootstrap navbar with automatically adjusted width?

Is there a way to make a twitter bootstrap navbar only as wide the menu items that are shown on it? My navbar has only 4 items by default, and 5 when the user is logged in, but the navbar is way too wide. I've tried changing the span, but that messes up the alignment and the navbar is no longer properly centralized. Could anyone help? Thanks!
Alternatively, I would also appreciate it if I somebody could help me just make the navbar fixed width, but without misaligning it and keeping it centralized.
This is my code for navbar:
<div id="top" class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Used books exchange</li>
<li>Submit a listing</li>
<li>My account</li>
<?php if (!empty($_SESSION["id"]))
{
print('<li>Log out</li>');
} ?>
</ul>
</div>
</div>
If I understand you correctly, i think this is what you are looking for.:
.container {
text-align: center;
}
.navbar {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
It makes the navbar only as wide as its content, centered, and does reasonably well when you resize it.
Here is a Jsfiddle of it:
http://jsfiddle.net/hajpoj/9E7QX/
You could give it a margin-right;
.navbar {
margin-right:200px; //whatever px you need
}

Getting blog text to wrap around menu DIV when menu rendered last

I am working with WordPress and I am trying to modify my template so that on my blog pages. I have a menu on the right hand side of the page while the blog content is on the left. The problem I am having is that all the space under the menu <div> is wasted and I would like to have the blog content wrap/flow around the menu <div>. Normally I would float the menu <div> to the right, however the WordPress engine outputs this <div> after the blog content so I am not sure how to float it to the upper right corner of the page.
I have created a JSFiddle example to illustrate.
You can use a short bit of JavaScript to move the menu as necessary. See the JSFiddle I forked from yours.
Essentially I modified the HTML to add ids to the menu and the blog content, something like this:
<div id="blog">
<p>...</p>
</div>
<div id="menu">
...
</div>
Then I styled them like so in CSS. Note that the menu has an explicit width but the blog content itself does not.
#blog { }
#menu {
float: right;
width: 400px;
}
Then I used a quick bit of JQuery to move the menu into the blog so that it can float right and the text will wrap around it:
$('#blog').prepend($('#menu').remove());​
Essentially what the JavaScript does is it removes the menu from the dom and then inserts it as the first child in #blog.
​
You need to set float of menu to right and put it on top of the post div.
For example, the CSS should be like this:
#post {width: 500px;}
#menu {
float: right;
width: 250px;
height: 100px;
color: #6666FF;
border: solid 1px #333;
}
And HTML:
<div id="post">
<div id="menu">lorep ipsum</div>
</div>
You can wrap text around a div like you would do with an image e.g: http://jsfiddle.net/Nbpen/

Resources