-
Posts
-
Hi,
I’m trying to get my menu to look like this: https://yourkarma.com/ , using the small fixed header.
* Small icon instead of full logo.(Looks much better on mobile, as my full logo is very long.)
* Menu items floating to the left.
* Log In & Menu Button on the right.
I’m currently using this CSS code to fix the menu:
#header_main .container, .main_menu ul:first-child > li > a {
height: 80px !important;
line-height: 80px !important;
}
I’ve searched the forums and made several changes to css, but it didn’t work out very well. I’ve now started back over with a clean slate, while still using the custom code to fix the menu.
Could you help me out this?
I can create a username/password and send it in a private message or email, if you need to see my site live.
Thanks for your support,
Benjamin
Hi Benjamin,
That kind of customization is beyond what we can do via support. You would need to have a freelance developer do the customization for you to ensure everything stays cross browser compatible as well as responsive.
The logo should be the same since you are just using a different square image and the positioning on the menu is pretty straightforward but the icon/borders will need a bit more individual time and care. Overall maybe 2 hours by a good developer.
Regards,
Devin
Thanks for your reply, Devin. I figured that I was pushing the limits of support for this one. I would like to discuss a lot of freelance work with you soon, if you’re not too busy. As far as this is concerned, I’ve pretty much got it the way I want it.
Here’s what I’ve done so far:
/*MOVE NAVIGATION MENU TO LEFT: */
div .logo {
float: left;
position: relative;
left: 0;
display: block;
}
.main_menu {
clear: none;
position: relative;
left: 60px;
}
/*REMOVE SEARCH FROM NAVIGATION MENU */
#menu-item-search {
display: none;
}
/*REMOVE 5PX PADDING FROM TOP & BOTTOM OF LOGO */
.logo img {
padding: 0;
}
/*CHANGE THE COLOR & OPACITY OF HEADER BACKGROUND */
#header {background-color: rgba(255, 255, 255, 0.98);
}
As far as the logo, I just added a 1px border in photoshop and uploaded it.
Everything looks great, but I still need to add a Log In & Button to the right side of the header.
Any ideas? I’m using the small fixed header.
Thanks,
Benjamin
Here’s an image showing what I’ve done so far and what I’m wanting to add.
https://dl.dropboxusercontent.com/u/17031532/expo_navigation_menu.png
Hey,
This will get you started. Edit header.php, find this code:
<!-- end container-->
</div>Above, place this code:
<div id="right-header">
<a class="login"href="LINK HERE">Login</a>
<a class="get-started"><img src="BUTTON IMAGE URL HERE"></a>
</div>After that, add this on your custom.css or Quick CSS:
#right-header {
position: absolute;
right: 0;
}
#right-header a {
display: inline-block;
width: 50px;
height: 100%;
}
#right-header a.login {
border-right: 1px solid gray;
}Regards,
Ismael
Thanks for your help, Ismael.
This is a great start. Here’s an updated screenshot: https://dl.dropboxusercontent.com/u/17031532/expo_navigation_menu_updated.png
I still need to move it all up to the menu and allow room for the 200×80 button image, which you can barely see in the link above.
Any ideas?
Thanks,
Benjamin
Without being able to inspect it anything would just be a blind guess.
But it looks like the button/container isn’t inside of the over header container. If you can make the site live we can inspect and see what we can do.
Any help would need to be public however so that it at least can help others who are looking for something similar.
I understand completely, Devin. Unfortunately, for several reasons, one being this forum is indexed, I simply can’t make this site live to the public as of now. I will, however, post what I’ve done so far to help anyone whom might be looking to add this, what I consider to be common, feature when working with woocommerce.
Here’s a screenshot of what I’ve managed to do so far:
https://dl.dropboxusercontent.com/u/17031532/expo_navigation_menu_updated_2.png
EDIT HEADER.PHP AND ADD:
(Refer to Ismael’s post above.)
(I’ve moved this above, below, and in between <div id=’header_main’ class=’container_wrap container_wrap_logo’> with no success, as it’s still covered by the main container, but maybe one of you can get it working.)
ADD THIS TO YOUR QUICK.CSS OR CUSTOM.CSS:
#right-header {
position: absolute;
height: 80px;
line-height: 80px;
right: 151px;
}
#right-header a {
display: inline-block;
height: 80px;
}
#right-header a.login {
padding-bottom: 40px !important;
height: 80px;
width: 70px;
font-family: “proxima-nova-alt”,sans-serif;
font-style: normal;
font-weight: 700;
font-size: 13px !important;
text-transform: uppercase;
letter-spacing: 2px;
color: #919191;
}
(Obviously, you’ll have to adjust this css to fit your needs. For example, I’m using a custom font from Typekit, which most of you won’t need.)
Thanks to you both, Devin & Ismael, for your support,
Benjamin
- The topic ‘Navigation Menu Changes’ is closed to new replies.