How to align a Wordpress navigation bar to the right of a logo?
FreakFlag
I'm trying to get my navigation bar to the right of the logo in my Wordpress theme. It's being built with Underscores. I've managed to line up the primary navigation and the logo the way I want it, basically, with this CSS:
.main-navigation {
position: relative;
float: right;
top: -4em;
width: 55%;
display: block;
clear: both;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
float: right;
}
and here's a picture of how I want it to look:
I understand that negative margins (assuming top: -4em; is considered with negative margins) aren't elegant or the best way to handle these sorts of things. Plus, I generally find these kinds of workarounds usually come back to bite me later on.
I'm new to playing around with JSFiddle, so I hope I've done this correctly! Here's my code, now condensed!: http://jsfiddle.net/DMDesigns/d39ej96r/11/
What's the best way to make this happen? I've been searching, seen a lot of people ask this question, but many of the answers have been too specific to their website to help me.
FreakFlag
This took me the better part of the day to figure out, yesterday, but disappointed with the lack of responses, here's what I figured out. I'm posting it here for anyone else having a similar problem.
First, I took the logo (named .header-image) and added:
float: left;
position: relative;
Then I took the navigation I wanted to the left of (named .main-navigation) and removed my workaround, which was
float: right;
top: -4em;
width: 55%;
and changed clear:both; to clear:none;
I added a little personal CSS to my .main-navigation to make it match the logo which was
height: 112px;
background: #69d7f9;
z-index: -1;
padding: 28px 0;
and I removed any floats from .main navigation ul.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
How to align logo at left and navigation on right side?
- 2
How to move navigation bar to more to the right to fit a logo left of the bar
- 3
How to put align a link right side in navigation bar
- 4
how to align logo with nav bar
- 5
How to put logo on navigation bar
- 6
Align logo on the left and navigation links on the right using flexbox
- 7
How to align the navigation menu in wordpress?
- 8
How to make the header with the logo on the left and the navigation on the right?
- 9
How do I right align links in the navigation bar of my Vue.js project?
- 10
How to fix navigation bar in wordpress?
- 11
How to right-align a navigation dropdown in ActionBar?
- 12
How to right-align a navigation dropdown in ActionBar?
- 13
How to vertically align icons on the navigation bar?
- 14
How to get the navigation bar to align to the center
- 15
How can I vertically align this navigation bar?
- 16
Logo above navigation bar
- 17
Centered logo in navigation bar
- 18
Logo in the middle of navigation bar
- 19
Logo above navigation bar
- 20
How do I align a Logo next to navigation links that are horizontally centered?
- 21
How to set right navigation bar button title
- 22
How to add right button in the navigation bar?
- 23
Align items in navigation bar
- 24
How to add jump links wordpress navigation bar?
- 25
How to vertically center Wordpress navigation bar
- 26
How to add jump links wordpress navigation bar?
- 27
Wordpress: Have no idea how to change the navigation bar
- 28
How to create a custom navigation bar (WordPress)
- 29
Logo and text alignment in navigation bar
Comments