Top Bar Logo / Donate & Collapsed Menus?

Posted in: ionMag
Post count: 32

Hey Everyone,

I am nearing the final stages of my project. The CEO has provided some feedback and so I now need to figure out how to get this working. I’ve been fiddling with CSS most of the night, but I am a bit stumped.

1. I would like to place a logo in the Top Bar. I used a plugin to do this, but I am wondering if I can do it natively in WPIon to save the trouble?

2. I would like to have a donate button on the Top Bar, but on the right (next to the social icons). I have tried float:right, and some other stuff, but I can’t seem to get it to work. What I would like is for the logo and another link to be on the left and the donate on the right. Or Logo in the middle, donate on right.

3. Is there an easy way to have every page other than the home page to have a collapsed header? The header is great for the main page, but gets a little tiresome as users jump around to other sections. If I could have the header collapsed and just show the header menu, that would be awesome.

Thanks!

Simion C.
Post count: 290

Hi,

1. I see you have managed to place a logo and donate button in the top bar, placing them as menu items and with the use of a plugin.

2. Placing the Donate button near the socials could prove to be difficult. The top menu as a whole has a left float set. Moving just that particular menu item may not be easy, and also work in all situations. Maybe try experimenting with a margin like this
https://www.screencast.com/t/mT4a63Pr9kV
But that might not work properly on all devices, so maybe create different codes in Advanced Custom CSS.

3. The header will be displayed on the whole website as it is. There are no options to remove the header or parts of it on specific pages.

Thanks

Post count: 32

Thanks for the reply and suggestions.

2. Ya, I was messing around with margins, but as you say it really doesn’t work well. It breaks pretty much at every other resolution. I may have to think on an alternative.

3. I assume the menu is controlled by JS. I don’t want to remove the header, I want to know if I can force a collapse of the header via JS or by creating a negative margin on the other pages that forces the menu/header to collapse?

Simion C.
Post count: 290

Hi,

You could create a code to maybe hide the header elements. On homepage it will remain the same, on all other pages it will look like this using an example code
https://www.screencast.com/t/AWCC6lddX
Maybe you can modify it more, if this is not the best solution

.td-header-style-2 .td-header-top-menu.td-container-wrap,
.td-header-style-2 .td-header-logo-wrap {
display: none!important;
}
.home .td-header-style-2 .td-header-top-menu.td-container-wrap,
.home .td-header-style-2 .td-header-logo-wrap {
display: block!important;
}

Thanks

Post count: 32

Thanks!

Here is what I am trying.

.td-header-style-2 .td-header-top-menu.td-container-wrap,
.td-header-style-2 .td-header-logo-wrap {
margin: -280px;
}
.home .td-header-style-2 .td-header-top-menu.td-container-wrap,
.home .td-header-style-2 .td-header-logo-wrap {
display: block!important;
margin: 0px;
}

Then, under mobile (iPhone) I am setting the margin back to 0px.

What this does is force the negative margin on all pages but the home page which forces the menu to collapse.

What do you think?

Post count: 32

Sorry, can’t seem to edit posts. This solution will not work..:(

Simion C.
Post count: 290

Hi,

I believe that would work, if the margin would be top only
https://www.screencast.com/t/kKpXj7PxvkD3

Thanks

Post count: 32

This is working perfectly… until it doesn’t.

I can’t figure it out. If I set the top margin to -302px it works perfectly (I had to add different values for tablets) it works perfectly.

http://sarnews.mywhc.ca/category/featured/

Then, suddenly I’ll load the page and the margin will be incorrect and it will cut off the content. Nothing has changed, it just suddenly looks wrong.

It is almost like it isn’t reading the custom CSS, or is loading some other value. It might also be browser related. In Chrome it looks perfect. In Safari it is way too high up.

Any ideas why this might be the case?

Thanks!

  • This reply was modified 1 week by  RCMSAR.
Post count: 32

I added overflow: hidden; and it seems to have fixed it. Perhaps it is a browser rendering issue.

Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.